SVG 创建图片,设置属性,创建元素

创建的SVG元素使用原生的js写都要加上NS

document.createElementNS(文档的声明,元素名)

设置除了class,如果要给SVG加上其他属性,如data-name等要加上NS

setAttributeNS(null,”height”,'30')

第一个参数是 元素的文档声明,也可以为null

下面是新建图片元素的例子

var xmlns = “http://www.w3.org/2000/svg“; //这就是svg文档声明

var svgImg = document.createElementNS(xmlns,”image”); //此处要使用createElementNS

svgImg.setAttributeNS(null,”x”,this.x); //屏幕x坐标位置

svgImg.setAttributeNS(null,”y”,this.y); //屏幕坐标y位置

svgImg.setAttributeNS(null,”width”,this.width); //宽度

svgImg.setAttributeNS(null,”height”,this.heigh); 高度

svgImg.href.baseVal = "img/..."; //传入图片路径

g.appendChild(svgImg);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,061评论 0 2
  • Data Visualization with D3 D3: SVG中的jQurey 1. Add Documen...
    王策北阅读 793评论 0 2
  • @(HTML5)[canvas与SVG] [TOC] 十一 、SVG HTML体系中,最常用的绘制矢量图的技术是S...
    踏浪free阅读 4,635评论 0 2
  • AFNetWorking基于系统NSURLConnection和NSURLSession实现的,也是基于CFNet...
    rebeccaBull阅读 209评论 0 0
  • 一、安装插件在系统管理、插件管理中搜索role-base 插件,进行安装 二、配置全局安全设置安装完成之后,在“配...
    BestFei阅读 770评论 0 0