<feColorMatrix>
<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乘以旧像素的 alphaA，- 再加上一个偏移量
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。
使用语境
属性
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 |
浏览器兼容性
加载中…