设置为背景的 SVG 线性渐变在 Edge 和 IE 中不起作用

Question

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?

Answer 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.

Answer 2

Here is an example of an SVG with a gradient that I exported out of illustrator, and then edited the SVG code to remove gradientTransform , and replaced x1, y1, x2, y2 values so that it works in internet explorer and edge:

Illustrator export:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="150px" viewBox="0 0 40 150" enable-background="new 0 0 40 150" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1023.5181" y1="4587.5352" x2="-1023.2139" y2="4587.5352" gradientTransform="matrix(0 492.7101 -492.7101 0 2260344.5 504297.75)">
    <stop  offset="0" style="stop-color:#FFCC07"/>
    <stop  offset="0.5111" style="stop-color:#346966"/>
    <stop  offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.81,143.313c0.349-0.071,0.677-0.258,0.907-0.564l10.981-14.513c0.504-0.667,0.371-1.625-0.296-2.13
    c-0.666-0.504-1.625-0.372-2.13,0.295l-8.354,11.042v-31.681c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
    L9.674,127.03c-0.541-0.638-1.506-0.717-2.144-0.176c-0.638,0.541-0.716,1.505-0.176,2.143l11.773,13.878
    C19.551,143.373,20.229,143.525,20.81,143.313"/>
</svg>

My edited code:

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="150px" viewBox="0 0 40 150">
<style type="text/css">
    .st0{fill:url(#s);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="40" y2="150" >
    <stop  offset="0" style="stop-color:#FFCC07"/>
    <stop  offset="0.5111" style="stop-color:#346966"/>
    <stop  offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.811,143.313c0.349-0.07,0.676-0.258,0.906-0.563l10.981-14.513c0.504-0.668,0.37-1.625-0.296-2.131
    c-0.666-0.504-1.625-0.371-2.131,0.295l-8.354,11.043v-31.682c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
    L9.674,127.03c-0.541-0.638-1.506-0.718-2.144-0.177c-0.638,0.541-0.716,1.506-0.176,2.144l11.773,13.878
    C19.551,143.373,20.229,143.525,20.811,143.313"/>
</svg>

This image shows the differences: file diff screenshot