SVG linear gradient set as background doesn't work in Edge and IE

问题

I am using SVG shape with linear gradient color via

background: url(#{$imgUrlBase}/element.svg);

Works just fine everywhere, except for Edge and IE, where the shape appears correctly, but instead of gradient, there is only solid color.

For multiple reasons (simple use of png fallback) I would like to use this way of implementation. I did not find any not of limitation of this usage regarding Edge.

This is element.svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 308 308" style="enable-background:new 0 0 308 308;" xml:space="preserve">
<style type="text/css">
    .st0{fill:url(#s);}
</style>
<g id="Page-1">
    <defs>
        <linearGradient id="s" gradientUnits="userSpaceOnUse" x1="-483.7941" y1="514.2445" x2="-484.1468" y2="514.5996" gradientTransform="matrix(620 0 0 -620 300215 319095)">
            <stop offset="0" style="stop-color:#FF0000"/>
            <stop offset="1" style="stop-color:#00FF00"/>
        </linearGradient>
    </defs>
    <path id="shape" class="st0" d="..."/>
</g>
</svg>

Any idea how to make SVG with linear background work as a background image in Edge and IE 11?

回答1:

There is something about that SVG that IE doesn't like. I think it may be the odd gradientTransform that's in there.

https://jsfiddle.net/efgtu2pj/

If you get rid of it and update the gradient coordinates to compensate, it renders fine.

<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 308 308">
<style type="text/css">
    .st0{fill:url(#s);}
</style>
<g id="Page-1">
    <defs>
        <linearGradient id="s" gradientUnits="userSpaceOnUse" x1="308" y1="308" x2="-50" y2="0">
            <stop offset="0" style="stop-color:#FF0000"/>
            <stop offset="1" style="stop-color:#00FF00"/>
        </linearGradient>
    </defs>
    <path id="shape" class="st0" d="M154,0,308,308,0,308"/>
</g>
</svg>

Note that the coords I have used aren't exactly equivalent. I have just chosen values that look to give approximately the same results as the original.

来源：https://stackoverflow.com/questions/45615978/svg-linear-gradient-set-as-background-doesnt-work-in-edge-and-ie

标签

html

css

internet-explorer

svg

microsoft-edge