clipPath-winding-01.svg

Enable keyboard shortcuts

Checkerboard

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

  <title>Testcase for clipPath with evenodd winding</title>

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

  <defs>

    <clipPath id="clip">

      <path clip-rule="evenodd" d="M100,100 l 50,0 0,50 -50,0 0,-50 50,0 0,50 -50,0 0,-50z"/>

    </clipPath>

  </defs>

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

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

</svg>