use-localRef-clipPath-resource.svg

Enable keyboard shortcuts

Checkerboard

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

  <defs>

    <clipPath id="circleClip1">

      <circle cx="50" cy="50" r="50"/>

    </clipPath>

    <clipPath id="circleClip2">

      <circle cx="50" cy="150" r="0"/>

    </clipPath>

    <clipPath id="circleClip3">

      <circle cx="50" cy="250" r="0"/>

    </clipPath>

  </defs>

  <rect id="cp1" x="0" y="0" width="100" height="100" fill="blue" clip-path="url(#circleClip1)"/>

  <rect id="cp2" x="0" y="100" width="100" height="100" fill="blue"/>

  <rect id="cp3" x="0" y="200" width="100" height="100" fill="blue"/>

</svg>