css 修改svg图标的颜色

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

<div class="" style="overflow: hidden;">
     <img style="filter: drop-shadow(red 80px 0);transform: translateX(-80px)" src="../images/ico_s1.svg" >
</div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • PNG格式小图标的CSS任意颜色赋色技术
    一、眼见为实 CSS可以修改图片的颜色，没错，可以，眼见为实！您可以狠狠地点击这里：png小图标CSS赋色demo...
    麻辣小隔壁阅读 3,547评论 0赞 0
  • H5和CSS知识点总结（全）
    1.图像标签可以有多个属性，但必需写在标签名后面 2.属性之间不分先后顺序，标签名与属性，属性与属性之间用空格隔开...
    罗森Rosen阅读 6,518评论 0赞 0
  • css与css3基础使用
    shift+alt 1：padding padding 不会撑开盒子大小：不给他高度和宽度，他就不会撑开盒子大...
    coder军阅读 4,545评论 0赞 0
  • CSS相关
    1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种？ CSS样式加载一共有四种方式： 1、行...
    没糖_cristalle阅读 4,221评论 0赞 0
  • CSS笔记-上篇
    1. CSS初识 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）...
    Scincyc阅读 2,481评论 0赞 0