使用 javascript 添加 <use>-tag

Question

我正在尝试使用 Javascript 添加use-svg-tag。 Jakob Jenkov 在这里对use 进行了精彩的介绍：http://tutorials.jenkov.com/svg/use-element.html

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

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://jsfiddle.net/yfmSm/2/

查看创建的结构（在 Google Chrome 工作区中）对我来说一切都很好。只是加了use的圈子是不可见的。

我错过了什么？

Answer 1

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

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

Updated Fiddle