mask-and-clipPath-2.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"

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

  <defs>

    <polygon id="p" points="0.25,0 0.75,0 0.75,1 0.25,1"/>

    <clipPath id="cp" clipPathUnits="objectBoundingBox">

      <use xlink:href="#p"/>

    </clipPath>

    <mask id="m" maskContentUnits="objectBoundingBox">

      <rect x="0" y="0.25" width="1" height="0.5" fill="white"/>

    </mask>

  </defs>

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

  <rect x="101" y="101" width="198" height="198" fill="red"/>

  <rect width="400" height="400" fill="lime" mask="url(#m)" clip-path="url(#cp)"

        x="-400" y="-400" transform="translate(400,400)"/>

</svg>