image-with-mask-and-clipPath.svg

Enable keyboard shortcuts

Checkerboard

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

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

  <rect width="100" height="100" fill="red"/>

  <g transform="translate(80 30)">

    <clipPath id="c" clipPathUnits="userSpaceOnUse">

      <rect x="-80" y="-30" width="100" height="100"/>

    </clipPath>

    <mask id="m" x="-80" y="-30" width="100" height="100">

      <rect x="-80" y="-30" width="100" height="100" fill="white"/>

    </mask>

    <image x="-80" y="-30" width="100" height="100" href="lime100x100.png" mask="url(#m)" clip-path="url(#c)"/>

  </g>

</svg>