img引入的SVG CSS滤镜部分失效原因及hover变色方案

hue-rotate()滤镜的作用逻辑是在HSL色彩空间内仅旋转像素的色相通道值，不会修改像素的饱和度、亮度属性。

• 你的Facebook图标填充色为纯白色#FFF，对应的HSL值为(0, 0%, 100%)，饱和度为0。所有饱和度为0的颜色（纯白、纯黑、各级灰度）都没有可被旋转的色相属性，因此无论设置多大的色相旋转角度，这类颜色都不会发生任何变化。
• 你的logo.svg包含的填充色分别为深灰蓝#2D314D、绿色#33D35E、青蓝色#2AB6D9，这些颜色的饱和度均大于0，具备可被调整的色相值，因此应用hue-rotate后会出现预期的色偏效果。

这个现象和SVG的结构复杂度、是外部引入还是内联引入没有任何关系，完全由滤镜的工作原理和SVG本身使用的颜色属性决定。

不需要准备hover替换图、不需要把SVG改成内联形式，以下两种纯CSS方案都可以实现需求：

• 方案1：组合滤镜实现颜色转换
  不要单独使用hue-rotate()，搭配invert()、sepia()、saturate()、brightness()滤镜组合，可以把纯白色像素转换成任意目标颜色。你可以通过现成的CSS滤镜颜色生成工具，输入目标色就能得到对应的滤镜参数，示例代码（hover转为青蓝色#2AB6D9）：

  .icon-facebook {
    transition: filter 0.2s ease;
  }
  .icon-facebook:hover {
    filter: invert(57%) sepia(93%) saturate(432%) hue-rotate(152deg) brightness(92%) contrast(90%);
  }
  

  这个方案兼容性最好，所有支持CSS滤镜的浏览器都能正常生效。

• 方案2：CSS Mask遮罩实现（更易维护）
  把SVG文件作为遮罩层覆盖在img元素上，原SVG的填充色会被完全忽略，你只需要给img设置背景色，hover时直接修改背景色即可，不需要计算复杂的滤镜参数，颜色控制100%准确，示例代码：

  .icon-facebook {
    width: 20px;
    height: 20px;
    /* 初始态为白色，匹配原设计 */
    background: #fff;
    /* 把外部SVG作为遮罩 */
    -webkit-mask: url('./images/icon-facebook.svg') center/contain no-repeat;
    mask: url('./images/icon-facebook.svg') center/contain no-repeat;
    transition: background 0.2s ease;
  }
  .icon-facebook:hover {
    /* 直接修改背景色即可实现变色，支持任意色值 */
    background: #33D35E;
  }
  

  该方案在所有现代浏览器中均已支持，添加-webkit-前缀即可覆盖98%以上的全球用户。

内容的提问来源于stack exchange，提问作者blkhwks19