设置 svg 颜色
代码格式:
<svg xmlns="" viewBox=""><path d=""></path></svg>
方法一(推荐):
svg {
fill:red;
}
--------------------------------------------------------------------------------------------------------------------------
方法二:
1. 利用滤镜创建一个投影,且将投影上移 100 像素,设置父元素 overflow:hidden(子元素若溢出父元素区域将不可见);
filter: drop-shadow(red 0px -100px);
2. 将svg宿主元素与投影上移 100 像素,此时svg宿主Y轴偏移出父元素范围之外(不可见),投影副本元素同时也上移 100像素,坐标正好是svg宿主的位置
transform: translate(0px, 100px);
总结:方法一代码量少,简单易行,且父元素无需设置 overflow:hidden。