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()需要用于那个，因为动态创建的图像不知道从xlink元素获取对svg命名空间的引用。修复方法如下：

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/

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

1 个答案: