CODEWITHSUNDEEP
svg
Rajkamal Subramanian
Rajkamal Subramanian

Reputation: 6944

Multiple SVG radial gradients

How to put multiple SVG radial gradient to an SVG element. A fiddle that i have created for this http://jsfiddle.net/4p9CK/.

I tried the following options but with no success.

 - <rect x="20" y="20" width="100" height="100" style="fill:
   url(#center_origin),url(#center_origin2); stroke: black;"/>

 - <rect x="20" y="20" width="100" height="100" style="fill:
   url(#center_origin, #center_origin2); stroke: black;"/>

Upvotes: 3

Views: 2584

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

No. SVG doesn't support multiple paint servers on one element (a "paint server" is a gradient, pattern etc). You would need to use multiple elements and simulate your desired effect by using opacity or filters - or by splitting up your shape geometrically.

Upvotes: 4

Related Questions