SVGとしてのCSS3グラデーション

Question

私のページでは、CSS3のグラデーションをたくさん使用しています。 IEとOperaにいくつかのSVGフォールバックを提供したいと思います。

CSS3のリニアグラジェントのSVGフォールバックを作成するのは簡単です。

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

このCSSに相当します：私は次のコードを使用し、それが放射状グラデーションをCSS3に来るとき

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

を今、物事はもう少し複雑になっています。 私は、次のようなCSS3の放射状の勾配のためのSVG相当を作成運がないよ：

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%); 

は、これまでのところ私はこの思い付くことができた：

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

しかし、それが与えます私は別の結果。

私はCSS3で元のものと同じ勾配を作り出すことができますか？ http://jsfiddle.net/QuMnA/あなたが放射状グラデーションのcxとcy属性を指定する必要が

Answer 1

...

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