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

我一直在努力去理解SVG feColorMatrix等式。如何使用SVG feColorMatrix來模擬PS Gradient Map效果？

我更喜歡使用Photoshop，而不是SVG腳本。在Photoshop中有用於應用的梯度照片「漸變映射」調整層：

enter image description here

一些如何，我認爲應該與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>

...但這並不做的工作：

enter image description here

所有暗示的歡迎！

來源

2014-12-02 Veiko Jääger

嗯，我想我就結合兩個過濾器八九不離十：

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

enter image description here

見codepen

來源

2014-12-02 09:57:58

這裏的例子不工作，但是代碼解釋： 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是二百五十五分之八十五等等......你的想法...

下面是一個對最終結果codepen：http://codepen.io/anon/pen/QbzEXV

來源

2015-07-31 15:57:55

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

回答

相關問題