CODEWITHSUNDEEP
htmlcssinternet-explorersvgmicrosoft-edge
Very Curious
Very Curious

Reputation: 891

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?

Upvotes: 2

Views: 2114

Answers (2)

Lisa
Lisa

Reputation: 1

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

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101800

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.

Upvotes: 5

Related Questions