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

发布于 2024-11-28 05:54:16 字数 432 浏览 2 评论 0原文

是否可以使用 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 文件中定义的。

原文

Is it possible to use CSS3 gradients for styling fill property?

I know that SVG provides their own gradients. But the ideal solution for me would be:

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

When I tried to use SVG gradients, I got stucked when I tried to extract style attribute to external stylesheet. It seemed that fill:url(#linearGradientXYZ) didn't work as the gradient was defined in .svg file.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

内心激荡 2024-12-05 05:54:16

不，目前还无法对 fill 属性使用 CSS3 渐变。不过好消息是 CSS 和 SVG 工作组正在讨论它，并且 SVG.next 将依赖于 CSS3 图像值（它定义了 CSS 渐变语法）。请参阅http://www.w3.org/2011/07/ 29-svg-分钟.html#item08。

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