svg - 使 SVG 元素透明(如蒙版)

Question

如何将多边形用作 mask ，使圆圈中的区域变得透明？
我无法管理它

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
    <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50"/>
</svg>

Answer 1

口罩其实很简单。它们在此处描述:http://www.w3.org/TR/SVG11/masking.html#Masking

在您的情况下，只需添加几行即可。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">

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

    <mask id="hole">
       <rect x="0" y="0" width="100" height="100" fill="white"/>
       <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50" fill="black"/>
    </mask>
</svg>

在掩码定义中，我们必须添加一个与圆圈大小相同的白色矩形以制作 <circle>可见(白色表示不透明)，我们制作 <polygon>黑色(透明)以创建孔。

Fiddle here