chromium/third_party/blink/web_tests/svg/custom/use-property-changes-through-svg-dom.svg

<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) {
         use1.href.baseVal = "#rect";
         use2.x.baseVal.value = 200;
         use2.y.baseVal.value = -50;
     }
    ]]>
  </script>
</svg>