Question

我的文档中有一个SVG，我用这样的javascript添加一个符号：

var myScene =document.getElementById('myScene');
var useSVG = document.createElement('use');
useSVG.setAttribute('xlink:href','spriteSheet.svg#mySymbol');
useSVG.setAttribute('x','10');
useSVG.setAttribute('y','30');
useSVG.setAttribute('width','10');
useSVG.setAttribute('height','10');
myScene.appendChild(useSVG);

符号未显示，而生成的代码与用HTML编写的另一个节点完全相同。

调试器中显示的代码：

<svg id="myScene" width="200px" height="200px">
    <use xlink:href="spriteSheet.svg#mySymbol" x="5" y="50" width="10" height="10"></use>
    <!-- this one was in html, it is visible -->
    <use xlink:href="spriteSheet.svg#mySymbol" x="10" y="30" width="10" height="10"></use>
    <!-- this one is added with javascript. it is not displayed -->
</svg>

Answer 1

您需要使用createElementNS()来创建SVG元素。基本createElement()在HTML命名空间中创建元素。所以你基本上一直在创建<html:use>个元素，而不是<svg:use>个元素。

var myScene =document.getElementById('myScene');
var useSVG = document.createElementNS('http://www.w3.org/2000/svg', 'use');
useSVG.setAttributeNS('http://www.w3.org/1999/xlink','href','spriteSheet.svg#mySymbol');
useSVG.setAttribute('x','10');
useSVG.setAttribute('y','30');
useSVG.setAttribute('width','10');
useSVG.setAttribute('height','10');
myScene.appendChild(useSVG);

Demo here

<强>更新

我刚刚意识到您的代码存在第二个问题。您在href中使用外部参考（它在另一个文件中引用了一个符号）。 IE似乎不支持外部引用。

我在这里找到了更多信息和可能的解决方法：http://css-tricks.com/svg-use-external-source/

Answer 2

我不确定100％，但我认为您需要使用xlink:href设置setAttributeNS()属性，如下所示：

useSVG.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'spriteSheet.svg#mySymbol');

还要确保在文档中声明了命名空间。

<html xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- or if standalone svg -->

<svg xmlns:xlink="http://www.w3.org/1999/xlink">

然而，这样我在xhtml文档中解决了同样的问题，可能也适用于html5或独立的SVG。

xlink specification

祝你好运！

为什么SVG使用javascript创建的元素没有显示？

2 个答案: