jQuery and SVG working together

Simple sample on how to use creat SVG element with jQuery.

HTML

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

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