2016年我写过一篇文章如何使用SVG图标,其“试验性部分”的结语是个警告 - “抱歉,渐变填充无法工作”。
我指的是像fill: linear-gradient(red, blue)一样的无效代码,因为fill属性出自SVG - 该元素内置了独有的渐变支持;而linear-gradient则源自CSS,常用于设置背景。二者的结合效果并不理想。
我可以使用SVG的元素,但之前并未尝试过。几个月后我做了试验,效果还算不错。下面请看分享。
在HTML中添加渐变
我发现最值得信赖的方式是在HTML页面中添加SVG元素(例如在
标签的开始或结束位置添加)。这里应该定义一个。`
这个元素不推荐用display:none实现隐藏效果,这样的话某些浏览器会忽略渐变效果。把元素高度设为0px来实现隐藏效果是可行的。
现在我们可以在SVG图标上使用渐变效果了:
或者在CSS里这样写:.icon { /* gradient and fallback color */
fill: url(#my-cool-gradient) #447799;
}
不过我们无法定制单个按钮的渐变。如果想这样做,需要在HTML中创建不同的SVG渐变定义。
使用CSS变量控制渐变色
如果我们想用CSS设置渐变色,可以通过CSS变量来实现。我们将使用CSS自定义属性来编写渐变定义(var(--my-custom-property)).
现在我们可以设置 - 如果需要的话 - 在CSS中还能改变这些颜色:#gradient-horizontal {
--color-stop-1: #a770ef;
--color-stop-2: #cf8bf3;
--color-stop-3: #