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

前端之家收集整理的这篇文章主要介绍了css3 – 用于样式化SVG元素的CSS 3渐变前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用 CSS3渐变来设置填充属性

我知道SVG提供了自己的渐变.但对我来说理想的@R_301_463@案是:

.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文件中定义的.

解决方法

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

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

原文链接:/css/215986.html

猜你在找的CSS相关文章