在Html里改变Img Svg 颜色显示不同状态

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<svg style="display: none;">
  <defs>
    <filter id="turnIntoRed">
      <feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="1 1 1 1 0
                0 0 0 0 0
                0 0 0 0 0
                0 0 0 1 0" />
    </filter>
  </defs>
</svg>
<img style="filter: url('#turnIntoRed')" src="some.svg" />

这种方式可以实现红色的渲染 , 但是会隐约出现原来的颜色 , 效果不行

方法二

1
2
3
4
5
6
7
8
9
<svg style="opacity: 0; position: fixed; left: -1000px; top: -1000px;">
  <defs>
    <filter id="turnIntoRed">
      <feFlood flood-color="#00" flood-opacity="1" result="color" />
      <feComposite in="color" in2="SourceGraphic" operator="in" />
    </filter>
  </defs>
</svg>
<img style="filter: url('#turnIntoRed')" src="some.svg" />

这种方法实现效果达到了效果 , 可以完美地显示红色 , 并且原来的颜色不可见 .

但是方法一和方法二都有一个问题 , 需要定义一个存在全局唯一的 ID , 如果 ID 被覆盖的话 , 那么就会超出预期地显示内容

方法三(推荐)

1
<img style="filter: drop-shadow(1000px 0 0 red); transform: translate(-1000px);" src="some.svg" />

这种方法不需要再定义晦涩难懂的 svg 标签 , 而是通过显示阴影的方式来解决问题 , 完美地解决了上面的问题 , 但是这个方法需要注意将图片移到看不到的位置 , 不然会出现两张图片

参考链接

img 使用 svg 后如何改变颜色