关于前端如何用css修改单个svg样式

372 阅读1分钟

一:利用css filter:drop-shadow

给icon加样式 (利用原图标的阴影区域,同时将原图标移动超过之前父元素范围) filter: drop-shadow(red 80px 0); transform: translateX(-80px); 给父元素加样式 (父元素超范围隐藏,正好把原图标的隐藏掉,显示阴影区域) overflow:hidden;

二:适合默认一种颜色的时候修改,如果系统色是可配置的,建议使用第一种

直接修改svg内容里的fill填充颜色,如果没有,可以自己添加,到svg里,如图

image.png