解决js设置svg image，图片无法显示问题

最新推荐文章于 2025-07-03 09:30:13 发布

李晓怡

最新推荐文章于 2025-07-03 09:30:13 发布

阅读量2.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端 svg

本文链接：https://blog.youkuaiyun.com/weixin_37674736/article/details/82426941

web前端同时被 2 个专栏收录

8 篇文章

订阅专栏

svg

1 篇文章

订阅专栏

本文介绍了一种使用SVG格式图片的方法，特别强调了如何通过设置image.href.baseVal属性正确加载图片资源，而非使用setAttribute方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用setAttribute来设置svg的image的路径，图片无法显示

要用 image.href.baseval 才会有效

var svgDoc = document.getElementById("sketchpad");
var imgSVG = document.createElementNS("http://www.w3.org/2000/svg", 'image');
imgSVG.href.baseVal = "img/water.png"; //svg设置image的url图片，要用image.href.baseVal
imgSVG.setAttribute('width', 70);
imgSVG.setAttribute('height', 70);
imgSVG.setAttribute('class', 'equ');
imgSVG.setAttribute('x', "150");
imgSVG.setAttribute('y', "200");
svgDoc.appendChild(imgSVG);