切斷SVG中的透明徑向漸變

我想製作一些類似火炬的東西，我知道我可以使用CSS。（帶圓圈的圖像和絕對定位）。但在這種情況下，我不能，因爲它會產生很多問題。切斷SVG中的透明徑向漸變

我們有紅色[div]，因爲我們有黑暗[svg> rect]。問題是如何通過黑暗使透明半徑圓圈？

enter image description here

我準備的jsfiddle我的問題，我會很高興，如果有人可以編輯它，去實現我的要求。

<div id="box"> 
<svg id="dark"> 
    <defs> 
    <radialGradient id="rade" r="50%" cx="50%" cy="50%"> 
     <stop stop-color="green" offset="0%" stop-opacity="1" /> 
     <stop stop-color="green" offset="50%" stop-opacity="1"/> 
     <stop stop-color="back" offset="100%"stop-opacity="1" /> 
    </radialGradient> 
    </defs> 
    <rect x="0" y="0" height="200" width="200"/> 
    <circle cx="90" cy="100" r="40" style="fill:url(#rade)"/> 
</svg> 
</div>

來源

2014-01-29 Sonny D

我在這裏很難理解這個問題。你想讓這看起來像什麼？如果你想要紅色，爲什麼你的例子中有綠色？ – nrabinowitz

對不起。我沒有寫清楚問題所在。我用圖像更新問題。 –

[看看這個]（http://stackoverflow.com/a/11878784/2065702） –

，如果你想在SVG透明的孔可以使用mask。

一些進一步閱讀可以發現here。

使用svg masking的交互式示例可見here。有趣的部分是：

<radialGradient id="radGrad"> 
    <stop offset="0" stop-color="white" stop-opacity="1"/> 
    <stop offset="1" stop-color="white" stop-opacity="0"/> 
</radialGradient> 
<mask id="mask"> 
    <circle id="c" cx="175" cy="175" r="50" fill="url(#radGrad)" 
    stroke-width="6" stroke-dasharray="6.28"/> 
</mask> 
... 
<g mask="url(#mask)"> 
    ... masked content ... 
</g>

來源

2014-01-30 06:02:33

謝謝。第三個鏈接有很大幫助。我得到了面具的真正效果。 –

切斷SVG中的透明徑向漸變

回答

相關問題