1

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

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

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

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

提前致谢！

4

1 回答 1

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属性，如下所示：http: //jsfiddle.net/cc4PH/8/svg

于 2013-07-26T18:28:47.870 回答