jQuery（または必要に応じてプレーンJavaScript）を使用して<use>をインラインSVGに追加するにはどうすればよいですか？

Question

HTML5文書にインラインSVGがあり、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');