clip-use-element-02.svg

Enable keyboard shortcuts

Checkerboard

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

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

  <defs>

    <rect x="100" y="100" width="100" height="100" fill="red" id="def"/>

    <clipPath id="myClipPath">

      <use  xlink:href="#def"/>

    </clipPath>

    <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/>

  </defs>

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

  <use  xlink:href="#abc"

        x="100" y="100" clip-path="url(#myClipPath)"/>

</svg>