Cut off transparent radial gradient in SVG - 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 ?
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>

Answer 1

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>