<feColorMatrix>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<feColorMatrix> SVG 濾鏡元素根據變換矩陣改變顏色。每個畫素的顏色值 [R,G,B,A] 與一個 5x5 的顏色矩陣進行矩陣乘法運算，以建立新的顏色 [R',G',B',A']。

注意：在數學中，撇號 ' 用於表示變換的結果。

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | * | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1  |   | 1 |

簡而言之，以下是新畫素中每個顏色通道的計算方法。最後一行被忽略，因為它的值是常數。

R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5

以新畫素中的紅色量，即 R' 為例

它是以下各項的總和：

r1 乘以舊畫素的紅色 R，
r2 乘以舊畫素的綠色 G，
r3 乘以舊畫素的藍色 B，
r4 乘以舊畫素的 alpha A，
再加上一個偏移量 r5。

指定的這些量可以是任何實數，但最終的 R' 將被限制在 0 到 1 之間。G'、B' 和 A' 也是如此。

R'      =      r1 * R      +        r2 * G      +       r3 * B      +       r4 * A       +       r5
New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]

例如，如果我們想讓一張完全黑色的圖片變得更紅，我們可以將 r5 設定為一個正實數 *x*，將新圖片中每個畫素的紅色增加 *x*。

一個單位矩陣看起來像這樣

     R G B A W
R' | 1 0 0 0 0 |
G' | 0 1 0 0 0 |
B' | 0 0 1 0 0 |
A' | 0 0 0 1 0 |

在這個矩陣中，每個新值都是其舊值的 1 倍，沒有其他新增。建議從這裡開始操作矩陣。

與其它濾鏡圖元一樣，它預設在 linearRGB 顏色空間中處理顏色分量。您可以使用 color-interpolation-filters 屬性改為使用 sRGB。

使用語境

分類	濾鏡圖元元素
允許內容	可包含任意數量、任意順序的下列元素 `<animate>`、`<discard>`、`<set>`

屬性

in：值包括 SourceGraphic、SourceAlpha、BackgroundImage、BackgroundAlpha、FillPaint、StrokePaint，或對另一個濾鏡圖元的引用。
type：值包括 matrix、saturate、hueRotate 和 luminanceToAlpha。
values：在 type 屬性中設定為 matrix 型別的值。

DOM 介面

此元素實現了 SVGFEColorMatrixElement 介面。

示例

SVG

html

<svg
  width="100%"
  height="100%"
  viewBox="0 0 150 500"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- ref -->
  <defs>
    <g id="circles">
      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
    </g>
  </defs>
  <use href="#circles" />
  <text x="70" y="50">Reference</text>

  <!-- identity matrix -->
  <filter id="colorMeTheSame">
    <feColorMatrix
      in="SourceGraphic"
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 1 0" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 70)"
    filter="url(#colorMeTheSame)" />
  <text x="70" y="120">Identity matrix</text>

  <!-- Combine RGB into green matrix -->
  <filter id="colorMeGreen">
    <feColorMatrix
      in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 140)"
    filter="url(#colorMeGreen)" />
  <text x="70" y="190">rgbToGreen</text>

  <!-- saturate -->
  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 210)"
    filter="url(#colorMeSaturate)" />
  <text x="70" y="260">saturate</text>

  <!-- hueRotate -->
  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
  </filter>
  <use
    href="#circles"
    transform="translate(0 280)"
    filter="url(#colorMeHueRotate)" />
  <text x="70" y="330">hueRotate</text>

  <!-- luminanceToAlpha -->
  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
  </filter>
  <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
  <text x="70" y="400">luminanceToAlpha</text>
</svg>

結果

規範

規範
濾鏡效果模組第 1 級 # feColorMatrixElement

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年3月18日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤