0

SVG has a wonderful symbol / use system where one can define e.g. icons just one, then drop them around the SVG by using use. Only I don't get it to work from JavaScript.

See this fiddle.

The programmatically created use nodes become visible in the browser's DOM, and are identical to the statically created ones. But only the static ones are visible.

Can you explain what's going on?

symbol is very similar to defs, but allows the viewBox to be defined next to the symbol, thus making scaling of the entries easier and causes cleaner code. I'm okay working with defs but I faced similar issues there, too.

Note: My JavaScript is on the HTML side, not within SVG. I would like to have it that way.

akauppi
  • 17,018
  • 15
  • 95
  • 120

1 Answers1

1

I think you have a typo in your fiddle (xref vs href) :

use.setAttributeNS( xlinkns, "xlink:xref","#tri");

intead of 

use.setAttributeNS( xlinkns, "xlink:href","#tri");
Delapouite
  • 9,469
  • 5
  • 36
  • 41
  • Actually I think it should be `use.setAttributeNS( xlinkns, "href","#tri");` – Kaiido Apr 03 '15 at 13:21
  • Okay. Do you have a reference for why 'xlink:' can be dropped (surely because it is in the namespace parameter). My code was based on http://metaskills.net/2014/08/29/dynamic-svgs-using-defs-elements-and-javascript/ and he seems to say it repeatedly. – akauppi Apr 03 '15 at 13:24
  • 1
    and http://stackoverflow.com/a/12423019/3702797 Since @Robert Longson is a reference by himself – Kaiido Apr 03 '15 at 14:22