use-localRef-clipPath-01-ref.svg

Enable keyboard shortcuts

Checkerboard

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

  <title>Reference for clipPath linked to local-ref URL</title>

  <defs>

    <clipPath id="clip1">

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

    </clipPath>

    <clipPath id="clip2">

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

    </clipPath>

    <clipPath id="clip3">

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

    </clipPath>

  </defs>

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

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

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

</svg>