html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果

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: #