1

Can someone tell me why the linear gradient on the svg element in the header and footer wont work in Safari on this site? One possible solution i've found on the internet, was wrapping the gradient with a <defs> tag which did not help in this case.

1 Answer 1

9

Looks like Safari doesn't like the <base> tag. It stops the fill from working on that browser, so you get the default fill which is black.

e.g.

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>
    

against

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>
    

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.