Css 如何使用SVG feColorMatrix模拟PS渐变贴图效果？

我一直在努力理解SVG feColorMatrix方程

我更喜欢Photoshop而不是SVG脚本。在Photoshop中有“渐变贴图”“调整层，用于将渐变应用于照片：

我认为SVG颜色矩阵应该如何实现这一点，但如何实现呢

下面是一个简单的svg过滤器，下面是所需的Photoshop输出

我制作了这个过滤器：

<filter id="colored">
  <feColorMatrix type="matrix" in="SourceGraphic"
    values="0.3334 0      0      0 0
            0      0.8196 0      0 0
            0      0      0.6471 0 0
            0      0      0      1 0 "/>
</filter>

。。但这并不起作用：

---

欢迎光临

是的，我想通过组合两个过滤器，我已经非常接近了：

<filter id="colors">
  <feColorMatrix result="A" in="SourceGraphic" 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 "/>
  </feColorMatrix>
  <feColorMatrix color-interpolation-filters="sRGB" in="A" type="matrix" 
    values="0.3334 0      0      0 0
            0      0.8196 0      0 0
            0      0      0.6471 0 0
            0      0      0      1 0 "/>         
  </feColorMatrix>
</filter>

---

请参见

此处的示例不起作用，但对代码进行了说明：

基本上，你寻求的是：