use-localRef-mask-resource.svg

Enable keyboard shortcuts

Checkerboard

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

  <defs>

    <mask id="circleMask1" x="0" y="0" width="100" height="100" >

      <circle cx="50" cy="50" r="40" style="stroke:none; fill: #ffffff"/>

    </mask>

    <mask id="circleMask2" x="0" y="0" width="100" height="100" >

      <circle cx="50" cy="150" r="0" style="stroke:none; fill: #ffffff"/>

    </mask>

    <mask id="circleMask3" x="0" y="0" width="100" height="100" >

      <circle cx="50" cy="250" r="0" style="stroke:none; fill: #ffffff"/>

    </mask>

  </defs>

  <rect id="mask1" x="10" y="10" width="80" height="80" fill="blue" mask="url(#circleMask1)"/>

  <rect id="mask2" x="10" y="110" width="80" fill="blue" height="80"/>

  <rect id="mask3" x="10" y="210" width="80" fill="blue" height="80"/>

</svg>