如何使用 SVG feColorMatrix 模拟 PS 渐变映射效果？答案

【问题标题】：How to mimic PS Gradient Map effect with SVG feColorMatrix?如何使用 SVG feColorMatrix 模拟 PS 渐变映射效果？
【发布时间】：2015-08-01 02:23:05
【问题描述】：

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

比起 SVG 脚本，我更喜欢 Photoshop。在 Photoshop 中有“渐变映射”调整层，用于将渐变应用到照片：

我认为应该如何使用 SVG 颜色矩阵来实现，但是如何实现？

这是一个简单的codepen，上面带有 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>

.. 但这不起作用：

欢迎所有提示！

【问题讨论】：

标签： css svg photoshop

【解决方案1】：

是的，我认为我通过组合两个过滤器非常接近：

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

见codepen

【讨论】：

【解决方案2】：

此处的示例不起作用，但代码已解释： http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/

基本上，您所寻求的是：

<svg version="1.1" width="0" height="0">
    <filter id="filter-1438364318222">
        <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues="0 0.3333333333333333"></feFuncR>
            <feFuncG type="table" tableValues="0 0.8196078431372549"></feFuncG>
            <feFuncB type="table" tableValues="0 0.6470588235294118"></feFuncB>
            <feFuncA type="table" tableValues="1 1"></feFuncA>
        </feComponentTransfer>
    </filter>
</svg>

0.3333 是 85/255 等等……你懂的……

这是一个带有最终结果的代码笔：http://codepen.io/anon/pen/QbzEXV

【讨论】：