<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[
     var use1 = document.getElementById("use1");
     var use2 = document.getElementById("use2");

     if (!use1 || !use2)
         return;

     use1.href.baseVal = "#rect";

     use2.x.baseVal.value = 200;
     use2.y.baseVal.value = -50;
    ]]>
  </script>
</svg>