Как имитировать эффект градиента PS с помощью SVG feColorMatrix?

Question

Я пытаюсь понять SVG feColorMatrix уравнение.

Я больше дома с Photoshop, чем скрипты SVG. В Photoshop есть корректирующий слой «Gradient Map» для нанесения вашего градиента на фото:

Некоторые, как я думаю, что должно быть также достигнуто с 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/

В основном, вы ищете следующее:

<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 и так далее ... Вы получаете идею ...

Вот является codepen с конечным результатом: http://codepen.io/anon/pen/QbzEXV