SVG:mask要素

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/SVG:mask要素/m.svg

code:m.svg

<mask id="myMask">

<!-- Everything under a white pixel will be visible -->

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

<!-- Everything under a black pixel will be invisible -->

<path

d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"

fill="black" />

</mask>

<polygon points="-10,110 110,110 110,-10" fill="orange" />

<!-- with this mask applied, we "punch" a heart shape hole into the circle -->

<circle cx="50" cy="50" r="50" mask="url(#myMask)" />

</svg>

code:mx.svg

<svg viewBox="-10 -10 120 120">

<mask id="myMask">

<!-- Everything under a white pixel will be visible -->

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

<!-- Everything under a black pixel will be invisible -->

<path

d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"

fill="black" />

</mask>

<polygon points="-10,110 110,110 110,-10" fill="orange" />

<!-- with this mask applied, we "punch" a heart shape hole into the circle -->

<circle cx="50" cy="50" r="50" mask="url(#myMask)" />

</svg>

SVG要素.icon