SVG形狀的透明度，純色作爲背景

基本上，這是我做了什麼：

<svg width="200" height="200" style="background-color:green"> 
    <circle cx="100" cy="100" r="80" stroke="black" stroke-width="2" fill="transparent" /> 
</svg>

它創建類似this

你可以看到圓是透明的，但它仍然有從SVG標籤的綠色背景，我怎樣才能讓圓真正透明的，所以它可以作爲一個孔出現（在這種情況下，這將是白色，因爲頁面背景是白色的），爲了清楚這是我想要顯示的內容： enter image description here

有什麼辦法可以使這種情況發生？

來源

2014-10-20 Eldon Lesley

你可以使用一個面具。在這裏你可以看到通過矩形切割的紅色背景。

<svg width="200" height="200" style="background-color:red"> 
 
    <mask id="mask"> 
 
     <rect fill="white" width="100%" height="100%"/> 
 
     <circle cx="100" cy="100" r="80" stroke="black" stroke-width="2" fill="black" /> 
 
    </mask> 
 
    <rect mask="url(#mask)" fill="green" width="100%" height="100%"/> 
 
</svg>

來源

2014-10-20 09:29:45

明顯的例子，我會嘗試一下 – 2014-10-20 09:30:46

圓的行程被刪除，你怎麼能在中風依然存在的情況下做到這一點？ – 2014-10-21 09:17:37

你需要自己畫圓圈。即在最後一個矩形元素之後添加一個圓。 – 2014-10-21 10:13:31

我添加的@Rober解決

.svgClass { 
 
    position: absolute; 
 
    top: 0; 
 
}

<div> 
 
    The text should be visible within the circle 
 
</div> 
 

 
<div class="svgClass"> 
 
    <svg width="100%" height="100%" > 
 
    <mask id="mask"> 
 
     <rect fill="white" width="100%" height="100%" fill-opacity="1" /> 
 
     <circle cx="100" cy="100" r="90" /> 
 
    </mask> 
 
    <rect mask="url(#mask)" fill="green" width="100%" height="100%" fill-opacity="1"/> 
 
    </svg> 
 
</div>

來源

2016-03-24 14:56:14

SVG形狀的透明度，純色作爲背景

回答

相關問題