使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元素透明（如面具）

回答

相關問題