在HTML5 SVG中编程添加位图

Question

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

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

我创建了一个JSFiddle来演示这个问题：http://jsfiddle.net/cc4PH/1/。正如您在开发工具中所看到的，在静态情况和动态情况下，代码是相同的。但只有在静态情况下，图像才会显示出来。这不是浏览器特有的问题。我可以用Chrome，Firefox，Safari和Opera复制它。

我是否必须以某种方式告诉SVG加载图像？

提前感谢！

Answer 1

看起来问题在于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);

http://jsfiddle.net/cc4PH/6/

有趣的是，这也意味着在创建xmlns:xlink元素时不需要svg属性，如果链接的映像只能动态添加，如下所示：http://jsfiddle.net/cc4PH/8/