SVGの色とfeColorMatrixの一致

Question

影にはSourceAlphaを使用してSVGでドロップシャドウを作成しました。 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フィルタは色を少し明るくしているようです。それを修正する方法はありますか？

Answer 1

ほとんどのフィルタのような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の上で私に違って見えます。

Answer 2

私の答えは同じアイデアを繰り返しますが、私が追加しなければならないものは、コメントのためにあまりにも多くあります。

標準ではlinearRGBは何ですか、私はそれが偽、、直線と期待しています。私。

R | ½ 0 0 0 0 
G | 0 ½ 0 0 0 
B | 0 0 ½ 0 0 
A | 0 0 0 1 0 

（暗く-2回）で形質転換した白い色はそれではないはず、rgb(50%, 50%, 50%)と同じ色になる必要がありますか？同50％グレーであると予想

R | ½ 0 0 0 ½ 
G | 0 ½ 0 0 ½ 
B | 0 0 ½ 0 ½ 
A | 0 0 0 1 0 

（ligthen-2回）で形質転換

と同様に黒色。

私は結果として実際に見るものは、予想よりもはるかに軽く、カラーピッカーは#808080の代わりに#BCBCBCと表示されます。一方、color-interpolation-filters="sRGB"は結果を正確にします（デフォルト設定ではMacBookとwin10 ASUSノートブックをチェックしました）。

https://jsfiddle.net/7wvy57fq/2/