0

I am trying to add a use-svg-tag with Javascript. Jakob Jenkov has an excellent intro to use here: http://tutorials.jenkov.com/svg/use-element.html

I just tried to do the same thing with 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);

I made a fiddle for it: http://jsfiddle.net/yfmSm/2/

Looking at the structure created (in Google Chrome workspace) everything looks fine to me. It is just that the circle added with use is invisible.

What did I miss?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Leo
  • 4,136
  • 6
  • 48
  • 72

1 Answers1

1

You have to use setAttributeNS() for setting the href attribute, else the attribute will belong to the default (SVG) namespace and thus not be recognized.

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

Updated Fiddle

Sirko
  • 72,589
  • 19
  • 149
  • 183
  • Ah, thanks. I thought I tested that, but I did not get the namespace correct. With that info I found this page, https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course, which perhaps is a good overview? – Leo Jul 26 '14 at 18:04