Safari SVG线性渐变在Safari中不起作用

Question

有人可以告诉我为什么页眉和页脚中svg元素上的线性渐变在此站点上的Safari中不起作用吗？我在互联网上找到的一种可能的解决方案是，用一个<defs>没有用的标签包裹梯度。

Answer 1

看起来Safari不喜欢<base>标记。它将停止填充在该浏览器上的工作，因此您将获得默认填充黑色。

例如

html, body {
  width: 100%;
  height: 100%;
}

<base href="http://emtre.ch.tajo.host.ch/" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="footer-svg" width="100%" height="100%" viewBox="0 0 2000, 1200">

    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#efefef;stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:#FFF;stop-opacity:1"></stop>
        </linearGradient>
    </defs>
    <polygon points="0,595 1903,0 1903,1010 0,1010" fill="url(#grad1)"></polygon>
</svg>
    

反对

html, body {
  width: 100%;
  height: 100%;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="footer-svg" width="100%" height="100%" viewBox="0 0 2000, 1200">

    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#efefef;stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:#FFF;stop-opacity:1"></stop>
        </linearGradient>
    </defs>
    <polygon points="0,595 1903,0 1903,1010 0,1010" fill="url(#grad1)"></polygon>
</svg>