無法使用 svg 濾鏡正確更改圖像的顏色

Question

我有這張圖片	我需要讓它看起來像這樣（至少，我需要把T恤裝滿）

我有這個：

使用此代碼：

 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>

我應該如何更改代碼以完全填充紅色？ 將非常感謝任何答案。

Answer 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>