CODEWITHSUNDEEP
svg
Sonny D
Sonny D

Reputation: 981

Cut off transparent radial gradient in SVG

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>

Upvotes: 2

Views: 2537

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60976

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>

Upvotes: 3

Related Questions