I have an SVG block with a <rect> inside that uses a fill by referencing a linearGradient in another SVG block. The gradient's <stop> colours are defined in CSS along with the <rect>'s opacity of 0.8.
In Safari on OSX the gradient looks poor, with the colours very washed out (left). In Chrome on OSX the gradient looks correct (right). All other browser/OS combinations work correctly.
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>Side note
In my case, dc.js is the source of the fill-opacity CSS declaration on the <rect>. The other declarations are local to the project.