我想制作像 torch 这样的东西,我知道我可以使用 CSS 来实现。 (带有圆圈和绝对定位的图像)。但在这种情况下我不能,因为它会产生很多问题。
我们有红色[div],上面有黑暗[svg>rect]。问题是如何在黑暗中制作透明的半径圆?
我为我的问题准备了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>
最佳答案
您可以使用 mask如果你想在 svg 中制作一个透明的洞。
可以找到一些进一步的阅读 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>
关于svg - 剪掉SVG中的透明径向渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21444147/