グレースケール SVG がアルファに変換されると明るさが低下するのはなぜですか?

Question

SVG を使用して、透明な「星空」エフェクトを作成しようとしています。 SVG を Web ページ上の黒い背景要素内にインラインで配置しました。乱気流フィルターから始めて、カラー マトリックスを適用して目的の効果を実現しました。

<svg xmlns="http://www.w3.org/2000/svg">
    <フィルタid="フィルタ">
        <feTurbulence BaseFrequency="0.2" />
        <feColorMatrix 値=
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
    </フィルター>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...与える:

しかし、これにはアルファ透明度がありません。黒い背景上にあり、不透明度が低いことによってのみ明るさが低下する白いピクセルのプレーンを表現したいのです。そこで、これを行うために 2 番目のフィルターを通過させました:

<svg xmlns="http://www.w3.org/2000/svg">
    <フィルタid="フィルタ">
        <feTurbulence BaseFrequency="0.2" />
        <feColorMatrix 値=
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
        <feColorMatrix 値=
            0 0 0 0 1
            0 0 0 0 1
            0 0 0 0 1
            1 1 1 0 0" />
    </フィルター>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...与える:

これは非常に似ていますが、少し暗くなります。少し濃いのはなぜですか？黒い背景にオーバーレイすると、論理的には同じピクセルカラーが生成されるはずではありませんか?

Answer 1

Robert が上で指摘したように、色空間変換では奇妙な動作が発生する可能性があります。 2 番目のカラー マトリックスの後のピクセルは実際には明るくなるはずです。 SQRT(1/2.2) を指数値として追加の feComponentTransfer を追加することで、この問題を解決できるようです。