SVG mask complex example with text and shapes


A green rect with a complex mask applied to it showing the background image.

<svg viewBox="0 0 100 100" xmlns="" xmlns:xlink="">
    <mask id="myMask0">
        <circle cx="50" cy="50" r="30" fill="white"/>
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <text x="5" y="60" font-size="40">Mask</text>
        <circle cx="50" cy="50" r="30" fill="black"/>
        <text x="5" y="60" font-size="40" mask="url(#myMask0)" fill="white">Mask</text>
    <image xlink:href="" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>