设置 svg 颜色

设置 svg 颜色

代码格式:
 


方法一(推荐):
 svg {
  fill:red;
 }

设置 svg 颜色_第1张图片

--------------------------------------------------------------------------------------------------------------------------

方法二:
 1. 利用滤镜创建一个投影,且将投影上移 100 像素,设置父元素 overflow:hidden(子元素若溢出父元素区域将不可见);
 filter: drop-shadow(red 0px -100px);

 2. 将svg宿主元素与投影上移 100 像素,此时svg宿主Y轴偏移出父元素范围之外(不可见),投影副本元素同时也上移 100像素,坐标正好是svg宿主的位置
 transform: translate(0px, 100px);
 

设置 svg 颜色_第2张图片

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

 

你可能感兴趣的:(html,html,css,svg)