如何使用Javascript修改SVG标签内的image标签属性？

失效原因 #

你之前的写法不生效，是因为SVG元素的属性和普通HTML元素的DOM属性映射逻辑不同，不能直接通过.href/.src的方式赋值，需要通过专门的属性设置方法操作，同时要注意SVG的href属性可能涉及命名空间兼容问题。

可用解决方案 #

方案1：直接设置无命名空间href #

如果你的SVG代码和目标环境都支持SVG 2标准的无命名空间href，直接用setAttribute即可：

const svgImage = document.getElementById("changingImage");
svgImage.setAttribute("href", "phone2.png");

方案2：兼容带xlink命名空间的场景 #

大部分旧版浏览器、旧SVG代码都会使用xlink:href的命名空间写法，使用带命名空间的设置方法兼容性最好：

const svgImage = document.getElementById("changingImage");
svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "phone2.png");

方案3：全兼容兜底写法 #

如果不确定当前SVG的href写法、目标环境的兼容情况，可以同时设置两种属性，覆盖所有场景：

const svgImage = document.getElementById("changingImage");
svgImage.setAttribute("href", "phone2.png");
svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "phone2.png");

排查小技巧 #

如果设置后仍未生效，可以先在控制台打印属性验证是否设置成功，排除资源路径写错、元素选择错误的问题：

console.log(svgImage.getAttribute("href"));
console.log(svgImage.getAttributeNS("http://www.w3.org/1999/xlink", "href"));

内容的提问来源于stack exchange，提问作者Adam Dolson