如何用CSS filter将指定描边色的SVG转为目标颜色？

要实现将固定初始描边色的SVG转为任意目标颜色，且不直接修改SVG代码（仅通过fill/stroke属性设置初始色），有两种可靠方案：

一、纯CSS滤镜组合（近似通用，适合快速场景） #

利用CSS的hue-rotate()、saturate()、brightness()等滤镜，基于初始色与目标色的HSL差值计算参数：

假设初始色为 hsl(H0, S0%, L0%)，目标色为 hsl(H1, S1%, L1%)，滤镜公式为：

filter: 
  hue-rotate(calc(H1 - H0)deg) 
  saturate(calc(S1 / S0)) 
  brightness(calc(L1 / L0));

你的场景示例 #

初始红色 hsl(0, 100%, 50%) → 目标色 hsl(268deg, 50%, 50%)，代入后：

filter: hue-rotate(268deg) saturate(0.5) brightness(1);

但因为CSS滤镜的颜色空间是非线性的，直接计算会出现颜色偏差（如你遇到的结果不符问题），需要微调参数。若追求精准，推荐使用下面的SVG滤镜方案。

二、SVG feColorMatrix滤镜（精准通用） #

通过SVG的颜色矩阵滤镜，直接对初始色的RGB通道做线性转换，能100%匹配目标色，是通用解决方案。

实现步骤 #

1. 定义SVG滤镜：在页面中嵌入一个隐藏的SVG，里面定义feColorMatrix滤镜，矩阵值根据初始色与目标色的RGB比值计算。
   比如初始色为红色（rgb(255, 0, 0)），目标色hsl(268deg, 50%, 50%)转RGB为rgb(122, 63, 191)，计算矩阵：

   • R通道系数：122/255 ≈ 0.478
   • G通道系数：63/255 ≈ 0.247
   • B通道系数：191/255 ≈ 0.749

   对应的SVG代码：

   <svg width="0" height="0" viewBox="0 0 0 0" style="display: none;">
     <filter id="colorConverter">
       <feColorMatrix
         type="matrix"
         values="
           0.478 0 0 0 0
           0.247 0 0 0 0
           0.749 0 0 0 0
           0 0 0 1 0
         "
       />
     </filter>
   </svg>
   

2. CSS中应用滤镜：

   .svg-icon {
     stroke: red; /* 设置初始描边色 */
     filter: url(#colorConverter);
   }
   

通用化扩展 #

如果需要动态转换任意颜色，可通过JavaScript计算矩阵值：

• 获取初始色和目标色的RGB值
• 计算目标RGB各分量与初始RGB对应分量的比值（初始色为单色时，只有一个通道有值，其他通道比值为0）
• 动态修改feColorMatrix的values属性

总结 #

• 纯CSS滤镜组合适合快速场景，但受颜色空间限制可能有偏差；
• SVG颜色矩阵滤镜能实现精准的颜色转换，完全通用，适合对颜色精度有要求的场景。

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