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

Question

我的SVG块中有一个<rect>，其中fill使用linearGradient来引用另一个SVG块中的<stop>。渐变的<rect>颜色在CSS中定义，0.8的不透明度为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; }。

在OSX上的Safari中，渐变看起来很差，颜色很褪色（左）。在OSX上的Chrome中，渐变看起来正确（右）。所有其他浏览器/操作系统组合都能正常工作。

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

Answer 1

从<rect>中删除stop-opacity而不是修改渐变上的svg #gradient > stop { stop-opacity: 0.8; } svg #gradient > stop.from { stop-color: #FBAD18; } svg #gradient > stop.to { stop-color: #FFD81C; }解决了这个问题，但不清楚为什么这只会影响Safari / OSX组合。

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

function CheckFile(s)
{
 var ValidExtensions= new Array(".rtf",".html",".pdf");
 var FileExtension=s.value;
 FileExtension=FileExtension.substring(FileExtension.lastIndexOf('.'));
 if (ValidExtensions.lastIndexOf(FileExtension)<0)
{
 alert("Invalid format of file selected");
return false;
}
else {
return true;
}
}