无法使用 svg 过滤器正确更改图像的颜色答案

【问题标题】：Can't properly change image's color using svg filter无法使用 svg 过滤器正确更改图像的颜色
【发布时间】：2021-05-12 12:45:41
【问题描述】：

I have this image	And I need to make it look this way (at least, I need to fill the t-shirt fully)

我有这个：

使用此代码：

img {
  filter: url('#grayscale');
}

body {
 background:#000;
}

<img src="https://i.stack.imgur.com/csRyu.png">
<svg xmlns="http://www.w3.org/2000/svg" version="2">
            <defs>
              <filter id="grayscale">
                <feColorMatrix in="SourceGraphic" 
                type="matrix" 
                values="1 1 1 1 1
                        1 1 1 1 1
                        1 1 1 1 1
                        -0.8 -0.7 0 1 0" 
                result="grayscale" />
              </filter>
            </defs>
          </svg>

我应该如何更改代码以完全填充红色？非常感谢任何答案。

【问题讨论】：

标签： html css image svg-filters

【解决方案1】：

saturate 过滤器可以让你更接近

img {
  filter:saturate(0) url('#grayscale');
}

body {
 background:#000;
}

<img src="https://i.stack.imgur.com/csRyu.png">
<svg xmlns="http://www.w3.org/2000/svg" version="2">
            <defs>
              <filter id="grayscale">
                <feColorMatrix in="SourceGraphic" 
                type="matrix" 
                values="1 1 1 1 1
                        1 1 1 1 1
                        1 1 1 1 1
                        -0.8 -0.7 0 1 0" 
                result="grayscale" />
              </filter>
            </defs>
          </svg>

【讨论】：