OSX 上的 Safari 意外渲染具有填充不透明度的线性渐变答案

【问题标题】：Safari on OSX renders linearGradient with fill-opacity unexpectedlyOSX 上的 Safari 意外渲染具有填充不透明度的线性渐变
【发布时间】：2017-10-24 23:31:30
【问题描述】：

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

在 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 声明的来源。其他声明是项目本地的。

【问题讨论】：

标签： css macos svg safari

【解决方案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>

【讨论】：