Как я могу добавить <use>к встроенному SVG, используя jQuery (или простой JavaScript, если необходимо)?

Question

У меня есть встроенный SVG в документе HTML5, и я хотел бы добавить с помощью jQuery (или обычного JavaScript, если необходимо).

Я знаю, как добавить прямоугольник, окружность или другую форму, но яЯ пока не могу повторно использовать существующий.

Вот тест на jsFiddle: http://jsfiddle.net/nhoizey/uDVbn/

SVG:

<svg width="300" height="300">
  <symbol id="piece"><circle cx="50" cy="50" r="40" fill="green" /></symbol>
  <circle cx="70" cy="90" r="20" stroke="blue" fill="white" />
</svg>

JavaScript:

// it works!
var rect = $(document.createElementNS("http://www.w3.org/2000/svg","rect"))
  .attr({
    x: 10,
    y: 30,
    width: 50,
    height: 70,
    stroke: "red",
    fill: "white"
  });
$("svg").append(rect);

// it doesn't work
var newPiece = $(document.createElementNS("http://www.w3.org/2000/svg","use"))
  .attr({
    "xlink:href": "#piece",
    transform: "translate(100, 100)"
  });
$("svg").append(newPiece);

Я знаю, что есть плагин jQuery SVG, но хотел бы сохранить его максимально легким.

Answer 1

Правильный способ добавить атрибут href - использовать setAttributeNS.

useElement.setAttributeNS("http://www.w3.org/1999/xlink", 'href', '#piece');