mask-opacity-01.svg

Enable keyboard shortcuts

Checkerboard

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

  <title>Testcase for the combination of mask, clipPath and opacity</title>

  <defs>

    <mask id="m1" maskContentUnits="objectBoundingBox" style="mask-type: alpha;">

      <rect width="1" height="1" style="stroke:#ffffff; fill: #ffffff; opacity: 0.5;" mask="url(#m2)"/>

    </mask>

    <mask id="m2" maskContentUnits="objectBoundingBox" style="mask-type: alpha;">

      <rect width="0.5" height="1" style="stroke:none; fill: #ffffff"/>

    </mask>

  </defs>

  <rect width="100" height="100" fill="blue" mask="url(#m1)"/>

</svg>