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

【问题标题】：Adding bitmap images in HTML5 SVG programatically以编程方式在 HTML5 SVG 中添加位图图像
【发布时间】：2013-07-27 02:34:24
【问题描述】：

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

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

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

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

提前致谢！

【问题讨论】：

Programmatically creating an SVG image element with javascript的可能重复

标签： javascript html svg

【解决方案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/

【讨论】：

是的，如果您只想显示 svg，则不需要根目录上的 xmlns:xlink 属性。但是，如果您想序列化 svg（用于复制粘贴或外部编辑），您很可能也需要它（以及 href 属性上相应的 xlink: 前缀）。