animateMotion-to-overridden-1.svg

Enable keyboard shortcuts

Checkerboard

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

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

     class="reftest-wait">

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

  <script type="text/javascript">

    function doTest() {

      setTimeAndSnapshot(101, true);

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

  </script>

  <!-- Big green background to match lime.svg -->

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

  <!-- In the following pairs of rects, the only pairwise differences are the

       fill-color and the presence of the "to" attribute on the animateMotion

       element.  "to" shouldn't have any effect in these cases, since it has

       lower priority than "values," "path," and "mpath". So in each case, the

       lime rect should cover up the red rect at all times. -->

  <!-- Single-point path specified with "values" attribute: -->

  <g transform="translate(0,0)">

    <rect width="20" height="20" fill="red">

      <animateMotion values="20,0" dur="2" begin="100"/>

    </rect>

    <rect width="20" height="20" fill="lime">

      <animateMotion values="20,0" dur="2" to="-50,0" begin="100"/>

    </rect>

  </g>

  <!-- Multi-point path specified with "values" attribute: -->

  <g transform="translate(0,30)">

    <rect width="20" height="20" fill="red">

      <animateMotion values="20,0; 80,0" dur="2" begin="100"/>

    </rect>

    <rect width="20" height="20" fill="lime">

      <animateMotion values="20,0; 80,0" dur="2" to="-50,0" begin="100"/>

    </rect>

  </g>

  <!-- Path specified with "path" attribute: -->

  <g transform="translate(0,60)">

    <rect width="20" height="20" fill="red">

      <animateMotion path="m0,0 h100" dur="2" begin="100"/>

    </rect>

    <rect width="20" height="20" fill="lime">

      <animateMotion path="m0,0 h100" dur="2" to="-50,0" begin="100"/>

    </rect>

  </g>

  <!-- Path specified with "mpath" subelement: -->

  <path id="p" d="m0,0 h100"/>

  <g transform="translate(0,90)">

    <rect width="20" height="20" fill="red">

      <animateMotion dur="2" begin="100"><mpath xlink:href="#p"/></animateMotion>

    </rect>

    <rect width="20" height="20" fill="lime">

      <animateMotion dur="2" to="-50,0" begin="100"><mpath xlink:href="#p"/></animateMotion>

    </rect>

  </g>

</svg>