在我的页面上，我使用了很多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：
background:-webkit-linear-gradient(black,white);
background: -moz-linear-gradient(black,white);
background: -o-linear-gradient(black,white);
background: linear-gradient(black,white);
现在谈到CSS3径向渐变，事情变得越来越复杂 . 我没有运气为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/
1 回答
您需要指定径向渐变的
cx和cy属性...