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

Question

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

我正在尝试通过 <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/

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