如何使用SVG feColorMatrix模拟PS Gradient Map效果？

Question

我一直在努力去理解 SVG feColorMatrix 等式。

我使用Photoshop而不是SVG脚本。在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>

..但这不起作用：

欢迎所有提示！

Answer 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

Answer 2

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

基本上，你所寻求的是：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

0.3333是85/255等等......你明白了......

这是一个包含最终结果的codepen：http://codepen.io/anon/pen/QbzEXV