Javascript 以编程方式在HTML5 SVG中添加位图图像

我有一个使用SVG绘制画布的web应用程序。画画涂鸦和写文字作品。现在我希望能够将位图图像添加到画布。这根本不起作用

我试图通过

标记将图像添加到SVG。如果我写的是静态HTML，它的工作原理与您所期望的一样。但是，我只在HTML代码中创建SVG文档，所有其他元素都是通过JavaScript动态创建的。虽然这适用于路径和文本元素，但似乎不适用于图像。我想知道，为什么

我创建了一个JSFIDLE来演示这个问题：。正如您在开发人员工具中看到的，静态和动态情况下的代码是相同的。但只有在静态情况下，才会显示图像。这不是特定于浏览器的问题。我可以用Chrome、Firefox、Safari和Opera复制它

我是否必须告诉SVG加载图像

---

提前谢谢

问题似乎与

xlink:href

属性有关。似乎需要使用

setAttributeNS（）

，因为动态创建的图像不知道如何从

svg

元素获取对

xlink

命名空间的引用。修复方法如下：

var $img = $(document.createElementNS('http://www.w3.org/2000/svg', 'image')).attr({width: 200, height: 200});
$img.get(0).setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);

---

有趣的是，这也意味着如果链接的图像只会动态添加，那么在创建

svg

元素时不需要

xmlns:xlink

属性，如下所示：

看起来问题在于

xlink:href

属性。似乎需要使用

setAttributeNS（）

，因为动态创建的图像不知道如何从

svg

元素获取对

xlink

命名空间的引用。修复方法如下：

var $img = $(document.createElementNS('http://www.w3.org/2000/svg', 'image')).attr({width: 200, height: 200});
$img.get(0).setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);

---

有趣的是，这也意味着，如果链接图像只动态添加，则在创建

svg

元素时不需要

xmlns:xlink

属性，如下所示：

可能重复的是，如果只想显示svg，则不需要根目录上的

xmlns:xlink

属性。但是，如果您想序列化svg（用于复制粘贴或外部编辑），您很可能希望它也在那里（以及

href

属性上相应的

xlink:

前缀）。是的，如果您只想显示svg，您不需要根目录上的

xmlns:xlink

属性。但是，如果您想序列化svg（用于复制粘贴或外部编辑），您很可能也希望它出现在那里（以及

href

属性上相应的

xlink:

前缀）。