用于样式化SVG元素的CSS 3渐变

时间:2011-08-05 13:07:02

标签: css3 svg gradient

是否可以使用CSS3渐变来设置填充属性?

我知道SVG提供了自己的渐变。但对我来说理想的解决方案是:

.button{
    fill:#960000;
    fill: -webkit-gradient,linear,left bottom,left top,
          color-stop(0.45, #37304C),color-stop(0.73, #534D6B));
    fill: -moz-linear-gradient(center bottom,#37304C 45%,#534D6B 73%);
    ...
}

当我尝试使用SVG渐变时,当我尝试将样式属性提取到外部样式表时,我被卡住了。似乎fill:url(#linearGradientXYZ)无效,因为渐变是在.svg文件中定义的。

1 个答案:

答案 0 :(得分:13)

目前尚无法使用CSS3渐变作为填充属性。好消息是CSS和SVG工作组正在讨论它,而SVG.next将依赖于CSS3图像值(定义CSS梯度语法)。请参阅http://www.w3.org/2011/07/29-svg-minutes.html#item08

请注意,默认情况下fill:url(...)的基本网址是包含此规则的文件。因此,如果要将fill:url(#linearGradientXYZ)移动到外部样式表,请记住添加包含该渐变定义的文件的完整路径,例如。 fill:url(../images/gradients.svg#linearGradientXYZ)