<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <rect id="rect" fill="green" width="100" height="100"/>
  </defs>

  <g transform="translate(50 10)"> 
    <rect fill="red" width="100" height="100"/>
    <use id="use1" xlink:href="#none"/>
  </g>

  <g transform="translate(0 60)">
    <use id="use2" xlink:href="#rect"/>
  </g>

  <text x="60" y="140">You should see two green rectangles.</text>

  <script>
    <![CDATA[
     document.getElementById("use2").setAttribute("transform", "translate(200 -50)");
     document.getElementById("use1").setAttributeNS("http://www.w3.org/1999/xlink", "href", "#rect"); 
    ]]>
  </script>
</svg>