CSS3 gradients as SVG

Question

On my page i'm using a lot of CSS3 gradients. I would like to provide some SVG fallback for IE and Opera.

Creating SVG fallbacks for CSS3 linear-gradient is pretty easy. I use the following code:

   <svg xmlns="http://www.w3.org/2000/svg">
     <linearGradient id="g" gradientTransform="rotate(90,.5,.5)">
       <stop stop-color="black" offset="0"/>
       <stop stop-color="white" offset="1"/>
     </linearGradient>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
   </svg>

Which is equivalent to this css:

  background:-webkit-linear-gradient(black,white);
  background:   -moz-linear-gradient(black,white);
  background:     -o-linear-gradient(black,white);
  background:        linear-gradient(black,white);

Now when it comes to CSS3 radial-gradients, things are getting little more complicated. I'm having no luck creating the SVG equivalent for a CSS3 radial-gradient like the following:

  background:-webkit-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:   -moz-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:     -o-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:        radial-gradient(circle at 50% 10%,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);

So far i've managed to come up with this:

<svg xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="g">
    <stop stop-opacity=".3" stop-color="white" offset=".1"/>
    <stop stop-opacity="0" stop-color="white" offset=".9"/>
  </radialGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>

But it gives me different results.

How could i produce the same gradient as the original one in CSS3?

Here's a demo of two gradients: http://jsfiddle.net/QuMnA/

Answer 1

You need to specify the cx and cy attributes of you radial gradient...

<svg xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="g" r="1" cx="50%" cy="10%">
    <stop stop-opacity=".3" stop-color="white" offset=".1"/>
    <stop stop-opacity="0" stop-color="white" offset=".9"/>
  </radialGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>