Cut off transparent radial gradient in SVG

Question

I wanna make something like torch, I know I can use CSS for that. (image with circle and positioning absolute).But in this circumstances I can't, becouse it will create lot of problems.

We have red [div] on that we have darkness[svg>rect]. The problem is how to make transparent radius circle through that darkness ?

enter image description here

I prepared jsfiddle for my problem, I will be pleased if someone can edit it, to achieve my demands.

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>

I'm having a really hard time understanding the problem here. What do you want this to look like? And why is there green in your example if you want red? — nrabinowitz, Jan 29 '14 at 22:56
Sorry. I didn't write clearly what the problem is. I update question with image. — Sonny D, Jan 29 '14 at 23:19
[Check this out](http://stackoverflow.com/a/11878784/2065702) — Zach Saucier, Jan 29 '14 at 23:30
I find this theme. But don't help me. I but knowledge from there didn't to resolve my problem. Maybe I can't seen that, so please show me how. I can cut circle, but the problem is opacity, I wanna spread color effect. — Sonny D, Jan 29 '14 at 23:47

score 3 · Accepted Answer · answered Jan 30 '14 at 06:02

You can use a mask if you want to make a transparent hole in the svg.

Some further reading on that can be found here.

An interactive example using svg masking can be seen here. The interesting part being:

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

Cut off transparent radial gradient in SVG

1 Answers1