css - OSX 上的 Safari 意外地呈现具有填充不透明度的 linearGradient

Question

我有一个 SVG用 <rect> block 里面使用 fill通过引用 linearGradient在另一个SVG堵塞。渐变的 <stop>颜色在 CSS 中与 <rect> 一起定义0.8 的不透明度.

在 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是fill-opacity的来源<rect> 上的 CSS 声明.其他声明是元素本地的。

Answer 1

删除 fill-opacity来自 <rect>而是修改 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>