Question

有人可以告诉我，为什么在此site的Safari中，页眉和页脚中svg元素上的线性渐变不起作用？我在互联网上找到的一种可能的解决方案是用<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>

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

1 个答案: