animateMotion-rotate-2.svg

Enable keyboard shortcuts

Checkerboard

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

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

     class="reftest-wait">

  <!-- Tests for rotate="auto" and "auto-reverse" -->

  <!-- The idea here is to create positioned red "holes" in the lime

       background, and then hopefully use paused <animateMotion> elements to

       position other elements exactly on top of the hole. -->

  <style>

    .background { fill:  lime   }

    .hole       { color: red    }

    .testBegin  { color: purple }

    .testEnd    { color: orange }

    .mask       { color: lime   }

  </style>

  <defs>

    <!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 -->

    <!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in

         SVG when redrawing the same non-pixel-aligned shape on top of itself

         in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the

         maximum distance from a path that antialiasing of square pixels can

         cause the path to affect. -->

    <path id="marker" d="m0,0 l-10,-30  c-5,-20 25,-20 20,0 z"

          style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/>

  </defs>

  <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 class="background" width="100%" height="100%" />

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

    <!-- Here's the hole -->

    <use xlink:href="#marker" class="hole"

         transform="translate(20,20) rotate(45)"/>

    <!-- And here's a stack of elements animated with 'animateMotion' that

         should end up there. -->

    <use xlink:href="#marker" class="testBegin">

      <animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/>

    </use>

    <use xlink:href="#marker" class="testEnd">

      <animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/>

    </use>

    <use xlink:href="#marker" class="mask">

      <animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/>

    </use>

  </g>

</svg>