use-1.svg - mozsearch

Enable keyboard shortcuts

Checkerboard

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

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

                  class="reftest-wait">

<script>

  function run() {

    document.documentElement.setCurrentTime(30);

    document.documentElement.removeAttribute('class');

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

</script>

<defs>

  <g id="shape">

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

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

  </g>

  <pattern id="pattern" width="200" height="100" patternUnits="userSpaceOnUse">

    <use xlink:href="#shape">

      <animateTransform attributeName="transform" type="translate" calcMode="discrete"

                        dur="30s" from="0 0" to="-100 0" fill="freeze"/>

    </use>

  </pattern>

</defs>

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

<rect height="100%" width="100%" fill="url(#pattern)"/>

</svg>