使SVG元素透明（如面具）

如何将多边形用作遮罩，这会使圆圈中的区域变透明？我不能管理它使SVG元素透明（如面具）

<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>

来源

2013-12-20 Jon Lamer

面具很简单。他们在这里描述：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

来源

2013-12-21 10:13:17

-1

我要说尝试使用Inkscape作出SVG文件，相互借鉴，取长补短您的项目，选择他们两个，并使用Path->Exclusion菜单这样做。保存你的文件，然后你可以看看.svg文件的代码，看看它做了什么。

来源

2013-12-20 19:49:51 leeand00

使SVG元素透明（如面具）

回答

相关问题