anim-use-length-02.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<svg xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink"

     class="reftest-wait">

  <title>Test animation of the "width" &amp; "height" &lt;length&gt; attributes on the "use" element</title>

  <script type="text/javascript">

    function doTest() {

      setTimeAndSnapshot(1, true);

    window.addEventListener("MozReftestInvalidate", doTest, false);

  </script>

  <script xlink:href="smil-util.js" type="text/javascript"/>

  <defs>

    <g id="g1">

      <rect width="100" height="50" fill="lime" />

    </g>

    <g id="g2">

      <rect y="50" width="100" height="50" fill="lime" />

    </g>

  </defs>

  <rect width="100%" height="100%" fill="lime"/>

  <rect width="100" height="100" fill="red" />

  <use xlink:href="#g1">

    <set attributeName="width"

      to="0" begin="0s" dur="0.5s"/>

  </use>

  <use xlink:href="#g2">

    <set attributeName="height"

      to="0" begin="0s" dur="0.5s"/>

  </use>

</svg>