How to translate svg code to javascript code?

Question

I learned here stackoverflow that you can dynamically insert svg element into an HTML file as follows.

  var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
  var path = document.createElementNS('http://www.w3.org/2000/svg','path');
  path .setAttribute("d","......");
  svgnode.appendChild(path);
  document...........appendChild(svgnode);

And it works well. I expected that you can continue it as follows too.

var defs = document.createElementNS('http://www.w3.org/2000/svg','defs');
var use = document.createElementNS('http://www.w3.org/2000/svg','use');
var path2=document.createElementNS('http://www.w3.org/2000/svg','path');
path2.setAttribute("d","....");
path2.setAttribute("id","path2");
defs.appendChild(path2);
use.setAttribute("xlink:href","#path2");
use.setAttribute("x","10");
use.setAttribute("y","10");
svgnode.appendChild(defs);
svgnode.appendChild(use);
document...........appendChild(svgnode);

But the second one just fails .

Please point out what is wrong in the second one.

Thank you in advance.

Answer 1

It's just the xlink:href that's the problem and that needs to be in the xlink namespace:

use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#path2");

The rest of the code will work fine in the non-namespaced form.