SVG学习之动态插入图片

最新推荐文章于 2024-08-01 00:26:34 发布

lwhwoaini1314

最新推荐文章于 2024-08-01 00:26:34 发布

阅读量3.1k

点赞数 1

分类专栏： js html 文章标签： svg 对象图片插件

本文链接：https://blog.csdn.net/lwhwoaini1314/article/details/79484904

版权

本文介绍了如何在SVG中动态插入图片，通过创建SVG图像元素并设置其属性来实现。示例代码展示了如何封装一个SVG图片组件，包括创建SVG图像、设置坐标和大小，并将图片插入到文档中。

摘要由CSDN通过智能技术生成

//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 = “http://www.w3.org/2000/svg“;
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(“http://www.w3.o