切断 SVG 中的透明径向渐变答案

【问题标题】：Cut off transparent radial gradient in SVG切断 SVG 中的透明径向渐变
【发布时间】：2014-01-30 14:02:33
【问题描述】：

我想做一些类似 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>

【问题讨论】：

我很难理解这里的问题。你想让这个看起来像什么？如果你想要红色，为什么你的例子中有绿色？
对不起。我没有写清楚问题是什么。我用图片更新问题。
Check this out
我找到了这个主题。但不要帮助我。但我从那里得到的知识并没有解决我的问题。也许我看不到，所以请告诉我如何。我可以切圆，但问题是不透明度，我想传播颜色效果。

标签： svg

【解决方案1】：

如果你想在 svg 中创建一个透明的洞，你可以使用mask。

可以在here找到一些进一步的阅读。

可以看到使用 svg 掩码的交互式示例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>

【讨论】：