Safariが予期せずに充填不透明で

Question

してLinearGradientをレンダリング私はその内部<rect>とSVGブロックが別SVGブロック内linearGradientを参照しfillを使用して持っています。グラデーションの<stop>の色は、<rect>の不透明度0.8とともにCSSで定義されています。

OSXのSafariでは、グラデーションが貧弱になり、色が非常に洗い流されて（左）。 OSXのChromeでは、グラデーションが正しく表示されます（右）他のすべてのブラウザ/ OSの組み合わせは正しく動作します。私の場合は

svg #gradient > stop { 
 
    stop-opacity: 1; 
 
} 
 

 
svg #gradient > stop.from { 
 
    stop-color: #FBAD18; 
 
} 
 

 
svg #gradient > stop.to { 
 
    stop-color: #FFD81C; 
 
} 
 

 
svg g rect { 
 
    fill-opacity: 0.8; 
 
}

<svg> 
 
    <g> 
 
    <rect width="100" height="100" fill="url(#gradient)"></rect> 
 
    </g> 
 
</svg> 
 

 
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <linearGradient id="gradient" x1="100%" y1="0%" x2="0%" y2="0%" spreadMethod="pad"> 
 
     <stop class="from" offset="0%"></stop> 
 
     <stop class="to" offset="100%"></stop> 
 
    </linearGradient> 
 
    </defs> 
 
</svg>

サイドノート

、dc.jsは<rect>上fill-opacity CSS宣言の源です。他の宣言はプロジェクトにとってローカルです。

Answer 1

<rect>からfill-opacityを削除し、代わりに勾配にstop-opacityを変更するには、問題を解決するが、これが唯一のSafari/OSXの組み合わせに影響を与え、なぜそれは明らかではありません。

svg #gradient > stop { 
 
    stop-opacity: 0.8; 
 
} 
 

 
svg #gradient > stop.from { 
 
    stop-color: #FBAD18; 
 
} 
 

 
svg #gradient > stop.to { 
 
    stop-color: #FFD81C; 
 
}

<svg> 
 
    <g> 
 
    <rect width="100" height="100" fill="url(#gradient)"></rect> 
 
    </g> 
 
</svg> 
 

 
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <linearGradient id="gradient" x1="100%" y1="0%" x2="0%" y2="0%" spreadMethod="pad"> 
 
     <stop class="from" offset="0%"></stop> 
 
     <stop class="to" offset="100%"></stop> 
 
    </linearGradient> 
 
    </defs> 
 
</svg>

Answer 2

私はSafariで同じ問題に実行しています。 fill-opacityを削除してstop-opacityを追加することで、Chrome、Safari、Firefoxの両方で良い結果が得られました。

基本的には、私はあなたの答えを確認しています（私の歴史の欠如のためコメントできませんでした）。