为什么将我的灰度 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

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

<filter id="filter" >
    <feTurbulence baseFrequency="0.2" />
     <feColorMatrix type="matrix" values="
        0 0 0 1 -.5
        0 0 0 1 -.5
        0 0 0 1 -.5
        0 0 0 0 1" />
    <feColorMatrix type="matrix" values="
        0 0 0 0 1
        0 0 0 0 1
        0 0 0 0 1
        1 1 1 0 0" />
   <feComponentTransfer>
     <feFuncA type="gamma" exponent="0.674"/>
  </feComponentTransfer>
</filter>