anim-filter-primitive-size-01.svg

Enable keyboard shortcuts

Checkerboard

<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" and "height" attributes of a filter primitive element</title>

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

  <script>

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

setTimeout(run, 4000); // fallback for running outside reftest

function run() {

  setTimeAndSnapshot(1, true)

  </script>

  <filter id="flood_filter" x="0%" y="0%" width="100%" height="100%">

    <feFlood width="0%" height="0%" flood-color="lime">

      <animate attributeName="width"

               calcMode="linear"

               begin="0s" dur="2s"

               from="0%" to="200%"

               fill="freeze"/>

      <animate attributeName="height"

               calcMode="linear"

               begin="0s" dur="1s"

               from="0%" to="100%"

               fill="freeze"/>

    </feFlood>

  </filter>

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

  <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/>

</svg>