设置 svg 颜色、文字或 icon 渐变颜色

设置svg属性

代码格式：

方法一：为svg配置 fill 属性

但是有些svg已经有 fill 属性，在引用文件的属性配置层级比较低，所有会失效：

svg {  
  fill:red;  
 }

方法二： 隐藏svg，配置投影

1. 利用滤镜创建一个投影，且将投影上移 100 像素，设置父元素 overflow:hidden（子元素若溢出父元素区域将不可见）；

filter: drop-shadow(red 0px -100px);

3. 将svg宿主元素与投影上移 100 像素，此时svg宿主Y轴偏移出父元素范围之外（不可见），投影副本元素同时也上移 100像素，坐标正好是svg宿主的位置

transform: translate(0px, 100px);  

总结：方法一代码量少，简单易行，且父元素无需设置 overflow:hidden。

设置文字、iconfont 渐变颜色

设置文字透明，用投影来控制颜色

	.some_icon {
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-image: linear-gradient(0deg, #a6e4ff 0%, #f096ff 100%);
	}