SVG学习之动态插入图片

SVG学习之动态插入图片

//svg地图插件
jl.ns(“js.uicomponent.component”);
js.uicomponent.component.SvgImage = jl.extend(js.layer.Layer, {
x: 0,
y: 0,
width: 60,
heigh: 60,
img: null, //容器对象元素
icon: “”, //图片的路劲
/* 创建svg图片 */
createImage: function(){
var g = this.create_g();
var xmlns = ““;
var svgImg = document.createElementNS(xmlns,”image”);
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 = this.icon;
g.appendChild(svgImg);
this.img = g; //g标签
},
create_g: function(){
return document.createElementNS(““,”g”);
},
initComponent: function(){
this.createImage();
}
});
这是本人封装的一个小方法运行在项目中的,
下面是我写的工具js可以直接用

var svg = {};
svg.image = function(obj){
for(var ele in obj){
this[ele] = obj[ele];
}
this.initComponent();
//return this;
}
svg.image.prototype = {
x: 0,
y: 0,
width: 60,
heigh: 60,
img: null,
icon: “”,
initComponent: function(){
this.createImage();
},
/* 创建svg图片 */
createImage: function(){
var xmlns = ““;
var svgImg = document.createElementNS(xmlns,”image”);
svgImg.setAttributeNS(null,”x”,this.x);
svgImg.setAttributeNS(null,”y”,this.y);
svgImg.setAttributeNS(null,”width”,this.width);
svgImg.setAttributeNS(null,”height”,this.heigh);
svgImg.href.baseVal = “../img/0.png”; //this.icon;
this.img = svgImg;
document.body.appendChild(this.img);
}
}