时间戳

首页 > 解决方案 > Safari SVG 线性渐变在 Safari 中不起作用

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

问题描述

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

标签： htmlcsssvg

解决方案

看起来 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>

推荐阅读