SVG 过滤器使彩色图像变成纯蓝色答案

【问题标题】：SVG filter to make color image plain blueSVG 过滤器使彩色图像变成纯蓝色
【发布时间】：2017-02-17 17:58:06
【问题描述】：

我一直在使用-webkit-filter: grayscale(100%); 使图像变灰。是否可以将图像染成蓝色？我想我可以像这样使用 SVG 过滤器并在 CSS 中引用它：

-webkit-filter: url(filters.svg#grayscale);

文件过滤器.svg：

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

上面的代码也只是一个灰度过滤器，我对 SVG 的了解还不够，无法制作一个蓝色的。我要找的蓝色是#002060。

任何正确方向的帮助或指示将不胜感激。

【问题讨论】：

标签： css svg filter

【解决方案1】：

我想你正在寻找

filter: hue-rotate(xxdeg); /* unprefixed */

JSFiddle Demo

HTML（带有原始图像和过滤

<img src="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" alt="">

<img class="filtered" src="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" alt="">

CSS（仅限 -webkit 前缀）

.filtered {
-webkit-filter: hue-rotate(180deg);
}

Useful Article

Useful Color Wheel

看起来您正在寻找的旋转值是 238 度，但这可能没有您想要的效果。

【讨论】：

感谢您的帮助。色调旋转滤镜为不同颜色的图像提供不同的结果。我想出了如何为特定颜色制作 feColorMatrix。
@MikhailJanowski ...请问您是怎么做到的？希望看到您的解决方案作为这个问题的答案。
原始示例已被 JSFiddle 禁用，我在这里重新创建了它：jsfiddle.net/a8e0gn9z/3

【解决方案2】：

您可以使用混合模式，它们的支持正在增加：

（来源：CSS 技巧）

https://css-tricks.com/almanac/properties/b/background-blend-mode/

和/或：https://css-tricks.com/snippets/css/monotone-image-css/

【讨论】：