为什么将灰度 SVG 转换为 Alpha 时亮度会降低？

Question

我正在尝试使用 SVG 创建透明的“星夜”效果。我将 SVG 内联在网页上的黑色背景元素内。我从湍流过滤器开始，然后应用颜色矩阵以获得所需的效果：

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...给出：

但这没有 alpha 透明度；我希望它代表白色像素的平面，其亮度仅通过位于黑色背景上且不透明度较小而降低。所以我将其通过第二个过滤器来执行此操作：

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
        <feColorMatrix values="
            0 0 0 0 1
            0 0 0 0 1
            0 0 0 0 1
            1 1 1 0 0" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...给出：

这非常相似，但稍微暗一些。为什么稍微暗一点？当覆盖在黑色背景上时，从逻辑上讲，它不应该产生相同的像素颜色吗？

Answer 1

正如罗伯特在上面指出的，色彩空间转换会产生一些奇怪的现象。在第二个颜色矩阵之后，像素实际上应该更亮。看来您可以通过添加一个额外的 feComponentTransfer（以 SQRT(1/2.2) 作为指数值）来解决此问题。