I have two elements in my <svg> element. One appears, one doesn't

Question

One of the use elements is created dynamically, one is created statically. I have written a jsfiddle.

https://jsfiddle.net/rhedin/r0dbf6uy/6/

Answer 1

You can't set an xlink:href attribute using setAttribute, you need to use setAttributeNS

var svgElt = document.getElementById('svg_box');
var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use');
newUse.setAttribute('x', '150px');
newUse.setAttribute('y', '10px');
newUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#b');
svgElt.appendChild(newUse);