Как перевести SVG-код в JavaScript-код?

Question

Я узнал здесь stackoverflow, что вы можете динамически вставлять элемент svg в файл HTML следующим образом.

  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);

И это работает хорошо.Я ожидал, что вы можете продолжить это следующим образом.

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);

Но второй просто не работает.

Пожалуйста, укажите, что не так во втором.

Заранее спасибо.

Answer 1

Это проблема xlink:href, которая должна быть в пространстве имен xlink:

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

Остальная часть кода будет нормально работать в не-пространстве имен.