filter-clipped-rect-01.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

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

-->

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

  <desc>

    This test checks that the filtering with a clipPath doesn't interact

    badly with transforms.

  </desc>

  <defs>

    <clipPath id="clipPath">

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

    </clipPath>

    <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>

  </defs>

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

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

    <!-- This 3-rect setup is to show red *both* if too much or if too little is clipped. -->

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

    <g clip-path="url(#clipPath)" filter="url(#filter)" transform="translate(50, 0)">

      <rect x="-20" y="-20" width="140" height="140" fill="red"/>

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

    </g>

  </g>

</svg>