clipPath-basic-08.svg

Enable keyboard shortcuts

Checkerboard

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

  <title>Testcase for basic clipPath</title>

  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1501057 -->

  <defs>

    <clipPath id="clip1">

      <rect width="100%" height="100%" visibility="hidden"/>

    </clipPath>

    <clipPath id="clip2">

      <rect width="100%" height="100%" visibility="hidden"/>

      <rect width="100%" height="100%" visibility="hidden"/>

    </clipPath>

  </defs>

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

  <rect width="100%" height="50%" fill="red" clip-path="url(#clip1)"/>

  <rect width="100%" y="50%" height="50%" fill="red" clip-path="url(#clip2)"/>

</svg>