OSX上的Safari使用fill-opacity意外渲染linearGradient

我有一個SVG塊，其中<rect>內部使用fill，在另一個SVG塊中引用linearGradient。 CSS中定義的顏色梯度爲<stop>，<rect>的不透明度爲0.8。OSX上的Safari使用fill-opacity意外渲染linearGradient

在OSX上的Safari上，漸變看起來很差，顏色非常暗，（左）。在OSX上的Chrome上，漸變看起來正確（右）。所有其他瀏覽器/操作系統組合正常工作

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聲明的來源。其他聲明是本地項目。

來源

2017-05-24 WolfyUK

從<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>

來源

2017-05-24 14:32:56 WolfyUK

-2

我遇到了在Safari同樣的問題。我通過刪除填充不透明度並添加不透明度，爲Chrome，Safari和Firefox帶來了良好的效果。

基本上，我確認你的答案（但由於缺乏歷史記錄而無法評論）。

來源

2017-06-27 21:46:05

OSX上的Safari使用fill-opacity意外渲染linearGradient

回答

相關問題