SVG過濾器feColorMatrix矩陣變換效果用法詳解

 在計算機圖形學（數學）中，矩陣乘法可用於把空間向量進行幾何變換。

我們可以把顏色的值（RGBA）表示成一個四維空間向量：color = (r, g, b, a);

那麼就可以應用矩陣相乘的方法來對其進行變換操作。

SVG標準中的feColorMatrix，當類型取值爲matrix時，就是利用這個方法來實現的圖像過濾效果。

變換矩陣的定義和說明

feColorMatrix的matrix是一個4*5的矩陣。前面4列是顏色通道的比例係數，最後一列是常量偏移。

上面公式中的rr表示red to red係數，以此類推。c1~c4表示常量偏移。

第一個4*5矩陣爲變換矩陣，第二個單列矩陣爲待變換對象的像素值。右側單列矩陣爲矩陣1和2的點積結果。

這個變換矩陣看起來比較複雜，在實踐上常使用一個簡化的對角矩陣，即除了rr/gg/bb/aa取值非零外，其餘行列取值爲0，這就退化成了簡單的各顏色通道的獨立調整。

feColorMatrix的語法

<filter id="f1" x="0%" y="0%" width="100%" height="100%">
  <feColorMatrix 
     result="original" id="c1" type="matrix" 
     values="1 0 0 0 0  
             0 1 0 0 0 
             0 0 1 0 0 
             0 0 0 1 0" />
</filter>

上述feColorMatrix過濾器的類型值爲matrix，除此之外，還有saturate（飽和度）和hueRotate（色相旋轉），取值比較簡單，這裏不做說明。

顯然當變換矩陣爲單位對角矩陣時，變換結果和原值相等。

我們可以嘗試調整比例係數，比如把rr的值設置爲0，即去除圖像中的red顏色通道含量：

代碼如下：

<filter id="colorMatrix">
        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0
           0 1 0 0 0
           0 0 1 0 0
           0 0 0 1 0" />
    </filter>
    <g filter="">
        <circle cx="30" cy="30" r="20" fill="red" fill-opacity="0.5" />
    </g>
    <g filter="url(#colorMatrix)">
        <circle cx="80" cy="30" r="20" fill="red" fill-opacity="0.5" />
    </g>

你可以自己在線試試。注意Filter Effects Module Level 1的狀態還是Working Draft，所以使用前注意測試瀏覽器支持情況。

如果是學習，請使用Chrome。

by iefreer