在这种情况下，关键是定义初始 colored颜色 .从技术上讲，白色、黑色或任何灰度级都是实际的 colored颜色 -你不能使其饱和或旋转.你得想办法给它"上色"，而深褐色的过滤是唯一可以上色的过滤.

如果你的图像是100%纯红的，那就容易多了.然后，您可以直接添加目标度数，并使用目标的HSL调整饱和度和亮度.对于白色起始点，第一步是转换和定义中间色，这样我们就可以在以后饱和和旋转它.

让我们首先将白色图像变暗，然后应用深褐色来获得我们可以使用的"基色":

filter: brightness(50%) sepia(1);

这将产生大约为的RGB colored颜色 值:

rgb(178, 160, 128)

第二步是convert that to HSL color-space，这给了我们:

hsl(38, 24.5%, 60%);

Base color result

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: brightness(50%) sepia(1);
  filter: brightness(50%) sepia(1);
}

<div></div>

Converting base color to target color

这两个第一步就是静电，每次我们需要找到目标调整的时候，都会重用它的结果(实际的sepia值是在SVG Filters specification中定义的).

现在我们需要计算我们需要对这个基色应用什么才能获得目标 colored颜色 .首先将目标 colored颜色 (例如问题中给出的#689d94)转换为HSL:

hsl(170, 21.3%, 51.2%);

然后我们必须计算它们之间的差额.色调只需从目标中减go 底色即可.饱和度和亮度也是如此，但由于我们假设基值为100%，因此需要从100%中减go 结果，以得出累加值的差值:

H:  170 - 38             ->  132°
S:  100 + (24.5 - 21.3)  ->  103.2%  (relative to base 100% =  3.2%)
L:  100 + (51.2 - 60.0)  ->   91.2%  (relative to base 100% = -8.8%)

通过将这些值附加到现有筛选器，将其转换为筛选器字符串，然后在div上设置:

/*      ------ base color ------  -------  new target -------------------------------*/
filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

要设置它，假设已经声明了filter和divElement，您可能会执行如下操作:

...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;

请注意，可能存在舍入误差，因为RGB表示为整数，而HSL表示为浮点，因此实际结果可能不准确，但应该非常接近.

Live example

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
  filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
}

<div></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>

可行的备选方案包括:

• 使用已设置的 colored颜色 预定义SVG.
• 直接在JavaScript中使用HSL/RGB，并使用形状的 colored颜色 直接修改SVG树，而不是使用滤镜.筛选器在性能方面非常昂贵，特别是当许多筛选器像这里一样链接在一起，并且它们是页面的主要部分时更是如此.它们在所有浏览器中都不受支持.