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>