切断SVG中的透明径向渐变

时间:2014-01-29 22:34:23

标签: svg

我想制作类似火炬的东西,我知道我可以使用CSS。 (图像用圆圈和绝对定位)。但在这种情况下我不能,因为它会造成很多问题。

我们有红色[div],因为我们有黑暗[svg> rect]。问题是如何在黑暗中制作透明半径圆?

enter image description here

我为我的问题准备了jsfiddle,如果有人可以编辑它,我会很高兴,以实现我的要求。

http://jsfiddle.net/BXM2G/2/

<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>

1 个答案:

答案 0 :(得分:2)

如果你想在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>