为什么 hue-rotate(180deg) 不是它自己的反函数?
Why is hue-rotate(180deg) not its own inverse?
The hue-rotate()
filter function“旋转元素的色调...指定为角度”。如果这是真的,filter: hue-rotate(180deg) hue-rotate(180deg)
将没有任何效果。但肯定确实有效果:
.square {
height: 3rem;
padding: 1rem;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
font-family: monospace;
font-weight: bold;
color: white;
}
.double-invert {
filter: hue-rotate(180deg) hue-rotate(180deg);
}
<div class="square">filter: none</div>
<div class="square double-invert">filter: hue-rotate(180deg) hue-rotate(180deg)</div>
这里发生了什么? hue-rotate
实际上是做什么的?我怎样才能实现是它自己的反转的色调旋转? (或者,我怎样才能想出一个反转色调旋转的滤镜?)
更新: 按照 Temani Aiff 的回答,似乎 hue-rotate(180deg)
实际上是一个矩阵乘法。但是,目前还不清楚它实际使用的是什么矩阵。下面显示我们可以将 SVG 过滤器 type="hueRotate"
重新实现为原始矩阵,但 CSS 过滤器 hue-rotate
实际上不匹配其中任何一个:
.square {
height: 3rem;
padding: 1rem;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
font-family: monospace;
font-weight: bold;
color: white;
}
.hue-rotate {
filter: hue-rotate(180deg);
}
.hue-rotate-svg {
filter: url(#svgHueRotate180);
}
.hue-rotate-svg-matrix {
filter: url(#svgHueRotate180Matrix);
}
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgHueRotate180">
<feColorMatrix in="SourceGraphic" type="hueRotate"
values="180" />
</filter>
<!-- Following matrix calculated following spec -->
<filter id="svgHueRotate180Matrix">
<feColorMatrix in="SourceGraphic" type="matrix"
values="
-0.574 1.43 0.144 0 0
0.426 0.43 0.144 0 0
0.426 1.43 -0.856 0 0
0 0 0 1 0" />
</filter>
</svg>
<div class="square">filter: none</div>
<div class="square hue-rotate">filter: hue-rotate(180deg)</div>
<div class="square hue-rotate-svg">using SVG hueRotate</div>
<div class="square hue-rotate-svg-matrix">using SVG raw matrix</div>
至少在 Chrome 和 Firefox 中,hue-rotate
正在做一些不同于 SVG 过滤器的事情。但是它在做什么?!
hue-rotate(X) hue-rotate(X)
不等同于 hue-rotate(X+X)
如下所示:
.square {
height: 3rem;
padding: 1rem;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
font-family: monospace;
font-weight: bold;
color: white;
}
.single-invert {
filter: hue-rotate(360deg);
}
.double-invert {
filter: hue-rotate(180deg) hue-rotate(180deg);
}
<div class="square">filter: none</div>
<div class="square single-invert">filter: hue-rotate(360deg) </div>
<div class="square double-invert">filter: hue-rotate(180deg) hue-rotate(180deg)</div>
要理解您需要深入研究数学公式。从 the specification 开始,hue-rotate()
是:
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="[angle]"/>
</filter>
而对于 feColorMatrix
我们有一个 matrix calculation。我会在数学之后给你每个案例的矩阵(你可以按照规范自己尝试)
对于180deg
-0.574 1.43 0.144
0.426 0.43 0.144
0.426 1.43 -0.856
对于360deg
它是单位矩阵
1 0 0
0 1 0
0 0 1
当你应用两个过滤器时,这意味着你将使用同一个矩阵两次,这只不过是一个矩阵乘法。所以你必须做下面的乘法:
|-0.574 1.43 0.144| |-0.574 1.43 0.144|
| 0.426 0.43 0.144| x | 0.426 0.43 0.144|
| 0.426 1.43 -0.856| | 0.426 1.43 -0.856|
得到:
1 8.326 -1.387
1.387 1 0
0 0 1
这不是身份,因此使用 hue-rotate(180deg)
过滤两次并不等同于 hue-rotate(360deg)
。换句话说,不要将其视为“加法”,而应将其视为“乘法”。
The hue-rotate()
filter function“旋转元素的色调...指定为角度”。如果这是真的,filter: hue-rotate(180deg) hue-rotate(180deg)
将没有任何效果。但肯定确实有效果:
.square {
height: 3rem;
padding: 1rem;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
font-family: monospace;
font-weight: bold;
color: white;
}
.double-invert {
filter: hue-rotate(180deg) hue-rotate(180deg);
}
<div class="square">filter: none</div>
<div class="square double-invert">filter: hue-rotate(180deg) hue-rotate(180deg)</div>
这里发生了什么? hue-rotate
实际上是做什么的?我怎样才能实现是它自己的反转的色调旋转? (或者,我怎样才能想出一个反转色调旋转的滤镜?)
更新: 按照 Temani Aiff 的回答,似乎 hue-rotate(180deg)
实际上是一个矩阵乘法。但是,目前还不清楚它实际使用的是什么矩阵。下面显示我们可以将 SVG 过滤器 type="hueRotate"
重新实现为原始矩阵,但 CSS 过滤器 hue-rotate
实际上不匹配其中任何一个:
.square {
height: 3rem;
padding: 1rem;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
font-family: monospace;
font-weight: bold;
color: white;
}
.hue-rotate {
filter: hue-rotate(180deg);
}
.hue-rotate-svg {
filter: url(#svgHueRotate180);
}
.hue-rotate-svg-matrix {
filter: url(#svgHueRotate180Matrix);
}
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgHueRotate180">
<feColorMatrix in="SourceGraphic" type="hueRotate"
values="180" />
</filter>
<!-- Following matrix calculated following spec -->
<filter id="svgHueRotate180Matrix">
<feColorMatrix in="SourceGraphic" type="matrix"
values="
-0.574 1.43 0.144 0 0
0.426 0.43 0.144 0 0
0.426 1.43 -0.856 0 0
0 0 0 1 0" />
</filter>
</svg>
<div class="square">filter: none</div>
<div class="square hue-rotate">filter: hue-rotate(180deg)</div>
<div class="square hue-rotate-svg">using SVG hueRotate</div>
<div class="square hue-rotate-svg-matrix">using SVG raw matrix</div>
至少在 Chrome 和 Firefox 中,hue-rotate
正在做一些不同于 SVG 过滤器的事情。但是它在做什么?!
hue-rotate(X) hue-rotate(X)
不等同于 hue-rotate(X+X)
如下所示:
.square {
height: 3rem;
padding: 1rem;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
font-family: monospace;
font-weight: bold;
color: white;
}
.single-invert {
filter: hue-rotate(360deg);
}
.double-invert {
filter: hue-rotate(180deg) hue-rotate(180deg);
}
<div class="square">filter: none</div>
<div class="square single-invert">filter: hue-rotate(360deg) </div>
<div class="square double-invert">filter: hue-rotate(180deg) hue-rotate(180deg)</div>
要理解您需要深入研究数学公式。从 the specification 开始,hue-rotate()
是:
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="[angle]"/>
</filter>
而对于 feColorMatrix
我们有一个 matrix calculation。我会在数学之后给你每个案例的矩阵(你可以按照规范自己尝试)
对于180deg
-0.574 1.43 0.144
0.426 0.43 0.144
0.426 1.43 -0.856
对于360deg
它是单位矩阵
1 0 0
0 1 0
0 0 1
当你应用两个过滤器时,这意味着你将使用同一个矩阵两次,这只不过是一个矩阵乘法。所以你必须做下面的乘法:
|-0.574 1.43 0.144| |-0.574 1.43 0.144|
| 0.426 0.43 0.144| x | 0.426 0.43 0.144|
| 0.426 1.43 -0.856| | 0.426 1.43 -0.856|
得到:
1 8.326 -1.387
1.387 1 0
0 0 1
这不是身份,因此使用 hue-rotate(180deg)
过滤两次并不等同于 hue-rotate(360deg)
。换句话说,不要将其视为“加法”,而应将其视为“乘法”。