|
1
46
在CSS和SVG过滤器中,都没有转换为HSV或HSL——色调旋转游击手使用RGB空间中的线性矩阵近似来执行色调旋转。对于小的旋转和高饱和的颜色,这并不能很好地保持饱和度或亮度——正如你所看到的。 真正的色调旋转,将首先将输入RGB颜色转换为HSL,调整H,然后转换回RGB。过滤器不能做到这一点。而且这种转换不能用线性矩阵精确地近似,所以当色调被精确地改变(大部分)时,饱和度和亮度会到处变化。这些效果是非线性的,所以将较小的操作加在一起会产生不同的颜色,而不是进行一次大的操作。 (SVG和CSS过滤器中色调的差异可能是由于使用了不同的颜色空间(sRGB与linearRGB)-这些 应该 相同。) 更新: 我有足够的兴趣去做一个手工比较。正如你所看到的,滤镜在0到180度范围内旋转纯色的色调方面做得很糟糕。此图像将通过手动插入hsl颜色(外圈)完成的手动色调旋转与基本颜色(内圈)上的滤色器色调旋转进行比较
但是,正如你所看到的,它们在不太纯净的颜色上做得更好,比如hsl(0,50%,75%)。
代码笔链接,如果您想播放: http://codepen.io/mullany/pen/fwHrd |
|
|
2
9
迈克尔的回答太棒了,我真希望我以前看过;但既然我不仅需要明白他们是该死的wierd,而且
以哪种方式
(我想研究他们的逻辑,所以我需要数学),我已经编码了
同样,这里的重点只是了解它会产生什么结果。
片段取自 this answer . |
|
|
3
2
tl;博士 将颜色从浮点(过滤器内部)转换为字节(其他位置)时出错。 所以比这复杂一点 spec 为色调旋转矩阵提供了一个很好的公式,例如180度的公式是(不包括alpha和偏移):
注意,如果你将其本身相乘,你会得到(小数点后四位):
其非常接近单位矩阵或零变换。 这将是完美的,除了浏览器在每个过滤器之间转换回RGB。看看当我们色调旋转明亮的红色时会发生什么:
我们得到了一种不可能用RGB表示的颜色,其值从0到255。所以它被绑定并取整为
|
|
|
man · CSS-如何具有或模拟仅适用于内部的半径边框 1 年前 |
|
|
McLaren · 增加笔划宽度属性后,图标将被裁剪 1 年前 |
|
|
user2171796 · 两个M。。。Z序列相遇,背景颜色显现 2 年前 |
|
|
MarcelausZell · 调整svg的大小会导致额外的高度 2 年前 |