third_party/WebKit/LayoutTests/svg/custom/use-property-changes-through-svg-dom.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   2   <defs>
   3     <rect id="rect" fill="green" width="100" height="100"/>
   4   </defs>
   5
   6   <g transform="translate(50 10)">
   7     <rect fill="red" width="100" height="100"/>
   8     <use id="use1" xlink:href="#none"/>
   9   </g>
  10
  11   <g transform="translate(0 60)">
  12     <use id="use2" xlink:href="#rect"/>
  13   </g>
  14
  15   <text x="60" y="140">You should see two green rectangles.</text>
  16
  17   <script>
  18     <![CDATA[
  19      var use1 = document.getElementById("use1");
  20      var use2 = document.getElementById("use2");
  21
  22      if (use1 && use2) {
  23          use1.href.baseVal = "#rect";
  24          use2.x.baseVal.value = 200;
  25          use2.y.baseVal.value = -50;
  26      }
  27     ]]>
  28   </script>
  29 </svg>