8

シャドウを使用してSVGでドロップシャドウを作成したSourceAlphaので、その無地の黒です。を使用feColorMatrixして不透明度を少し下げましたが、それでも思ったようには見えませんでした。影の色を特定の色の値に一致させたいのです。だから私はもっと深く見てみましたfeColorMatrix。

SourceAlpha現在、シャドウのソースとしては使用していませんが、 SourceGraphic。私のベクター画像は無地の白い別名rgba(255, 255, 255, 1)なので、次のように影の色を計算できます。

<feColorMatrix in="the-shadow" result="color-out" type="matrix"
                values="0.0157 0      0      0 0
                        0      0.3059 0      0 0 
                        0      0      0.7765 0 0 
                        0      0      0      1 0  "/>

結果は、ダークブルーの影（別名）になりrgba(4, 78, 198, 1)ます。

実際にはこれは機能しており、計算はすべて正しいと思いますが、同じ色を使用してCSS3でシャドウを作成すると、顕著な違いがあります。SVGフィルターは色を少し明るくしすぎるように見えます。それを修正する方法はありますか？

4

2 に答える 2

11

feColorMatrix は、ほとんどのフィルターと同様に、linearRGB 色空間で動作します。sRGB カラーが必要な場合は、feColorMatrix の属性としてcolor-interpolation-filters ="sRGB" を設定してみてください。

    <svg width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"
    
    viewBox="0 0 640 480" height="100%"
    xmlns="http://www.w3.org/2000/svg">
    
    <filter id="cm">
    
    <feColorMatrix in="SourceGraphic" type="matrix"
                    values="0.0157 0      0      0 0
                            0      0.3059 0      0 0 
                            0      0      0.7765 0 0 
                            0      0      0      1 0  "/>
    
    </filter>
    
    <filter id="cmRGB">
    
    <feColorMatrix color-interpolation-filters="sRGB" in="SourceGraphic" type="matrix"
                    values="0.0157 0      0      0 0
                            0      0.3059 0      0 0 
                            0      0      0.7765 0 0 
                            0      0      0      1 0  "/>
    
    </filter>
    
    <rect width="100%" height="50%" fill="white" filter="url(#cm)"/>
    
    <rect y="50%" width="100%" height="100%" fill="white" filter="url(#cmRGB)"/>
    
    </svg>

Firefoxでは確かに違うように見えます。

于 2013-02-02T15:21:51.363 に答える