代码之家 › 专栏 › 技术社区 › shabunc

feColorMatrix的第五列代表什么

svg-filters svg

shabunc · 技术社区 · 6 年前

在mozilla的文档中 feColorMatrix 据说

SVG过滤器元素根据颜色改变颜色变换矩阵。每个像素的颜色值(由 [R,G,B,A]向量)矩阵相乘以创建新颜色。

但是在 feColorMatrix 以极好的方式 article 可被视为经典参考的是:

这里的矩阵实际上是在计算一个最终的RGBA值行,为每个RGBA通道提供自己的RGBA通道。最后一个号码是一个乘数。

但这并不能解释很多。据我所知,由于在应用滤波器后,我们基本上只修改R,G,B和A通道,没有其他的,所以这个附加参数没有必要。间接地,在本文中有一个证据证明了这一点——所有提供的基于feColorMatrix的过滤器的众多示例——都有零作为第五个组件。还有,为什么它是一个乘数?

在另一个著名的 article 声明如下:

对于其他行,您将创建每个rgba输出值,如下所示: rgba输入值之和乘以相应的矩阵值,加上一个常数。

称之为常数加起来比称之为乘数更有意义,但目前还不清楚 feColor矩阵中的第五分量代表什么?没有它什么是不可能的

我最后的希望是w3c参考,但它是 surprisingly vague

1 回复 | 直到 6 年前

Michael Mullany 6 年前

虽然您需要理解矩阵数学,但规范是明确的。第五列是固定偏移量。它很有用,因为如果您想在输出中添加特定数量的R/G/B/a,那么该列是唯一的方法。或者如果你想重新着色到一个特定的颜色,这也是方法。

例如-如果您的输入中有多个不透明颜色,但您希望将所有颜色重新着色为rgba(255,51,0,1),那么这就是您将使用的矩阵。

0 0 0 0 0.2

又称作

<feColorMatrix type="matrix" values="0 0 0 0 1   0 0 0 0 0.5   0 0 0 0 0  0 0 0 1 0"/>

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前