dont-clip-previous-primitives.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

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

-->

<svg id="svg-root"

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

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

  <g id="testmeta">

    <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title>

    <link rel="copyright"

          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>

    <link rel="license"

          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>

    <link rel="author"

          title="Max Vujovic"

          href="mailto:mvujovic@adobe.com"/>

    <link rel="help"

          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>

    <link rel="match"

          href="dont-clip-previous-primitives.svg" />

    <metadata class="flags">namespace svg</metadata>

    <desc class="assert">

      In an SVG filter chain, this test verifies that a second filter's filter

      region does not clip the primitives inside a first filter. If the test

      passes, you should see a green square.

    </desc>

  </g>

  <g id="test-body-content">

    <!-- Use a wide filter region. -->

    <filter id="f1" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse">

      <!-- Create a red square at x=100. -->

      <feFlood flood-color="red" x="100" y="0" width="100" height="100"/>

      <!-- Offset the red square left to x=0. -->

      <feOffset dx="-100" x="0" y="0" width="200" height="100"/>

    </filter>

    <!--

      Use a less wide filter region. The intermediate results of the previous

      filter do not fit in this filter region, but that shouldn't matter. The

      previous filter's intermediate results should not be affected by this

      filter region. The final result of the previous filter should fit in this

      filter region.

-->

    <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">

      <!-- Turn the red square into a green square. -->

      <feColorMatrix type="hueRotate" values="90"/>

    </filter>

    <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="blue"/>

  </g>

</svg>