使用javascript添加<use> -tag </use>

Question

我正在尝试使用Javascript添加use - svg-tag。 Jakob Jenkov在use var useit = document.createElementNS("http://www.w3.org/2000/svg", "use"); useit.setAttribute("xlink:href", "#a-circle"); useit.setAttribute("x", "100"); useit.setAttribute("y", "100"); svg.appendChild(useit); 有一个很好的介绍：http://tutorials.jenkov.com/svg/use-element.html

我只是尝试用JavaScript做同样的事情：

use

我为它做了一个小提琴：http://jsfiddle.net/yfmSm/2/

查看创建的结构（在Google Chrome工作区中）一切看起来都不错。只是添加了{{1}}的圈子是不可见的。

我错过了什么？

Answer 1

您必须使用setAttributeNS()来设置href属性，否则该属性将属于默认（SVG）命名空间，因此无法识别。

// ...
useit.setAttributeNS("http://www.w3.org/1999/xlink", 'href', "#a-circle");
// ...

Updated Fiddle