Greg
Greg

Reputation: 776

SVG Linear Gradient does not work in Firefox

I have the following example of an SVG that was given to me by a flash designer, built with Adobe Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="30px" height="35px" viewBox="0 0 30 35" enable-background="new 0 0 30 35" xml:space="preserve">
<symbol  id="replay_icon" viewBox="0 -12 14 12">
    <g id="Layer_1_2_">
        <defs><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="7" y1="1" x2="7" y2="-13">
            <stop  offset="0" style="stop-color:#0000FF"/>
            <stop  offset="1" style="stop-color:#00FF00"/>
        </linearGradient></defs>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M12.25-10.25C11.083-11.417,9.667-12,8-12v2
            c1.1,0,2.05,0.383,2.85,1.15C11.617-8.083,12-7.133,12-6c0,1.1-0.383,2.033-1.15,2.8C10.05-2.4,9.1-2,8-2S5.95-2.4,5.15-3.2
            C4.383-3.967,4-4.883,4-5.95h2l-3-4l-3,4h2c0,1.633,0.583,3.034,1.75,4.2S6.333,0,8,0s3.083-0.583,4.25-1.75S14-4.333,14-6
            S13.417-9.083,12.25-10.25z"/>
    </g>
</symbol>
<use xlink:href="#replay_icon"  width="14" height="12" y="-12" transform="matrix(1 0 0 -1 10 11)" overflow="visible"/>
</svg>


The SVG image displays in all browsers, even IE9 (*gasp*), but it will not display in Firefox. The problem is with the linear gradient. If you add a stroke to the path, the path strokes correctly and becomes visible, but unfilled. I've tried many different variations to get the gradient to work with no success. Anybody know with which part of this SVG Firefox has a problem and how to correct it?

Upvotes: 8

Views: 8699

Answers (2)

Robert Longson
Robert Longson

Reputation: 124324

This issue is fixed from Firefox 77 onwards. To workaround the problem in earlier versions of Firefox, simply move the gradient definition outside the symbol element e.g.

<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="30px" height="35px" viewBox="0 0 30 35" enable-background="new 0 0 30 35" xml:space="preserve">
        <defs>
          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="7" y1="-13" x2="7" y2="1">
            <stop  offset="0" stop-color="#0000FF"/>
            <stop  offset="1" style="stop-color:#00FF00"/>
          </linearGradient>
        </defs>
<symbol  id="replay_icon" viewBox="0 -12 14 12">
    <g id="Layer_1_2_">
        <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M12.25-10.25C11.083-11.417,9.667-12,8-12v2
            c1.1,0,2.05,0.383,2.85,1.15C11.617-8.083,12-7.133,12-6c0,1.1-0.383,2.033-1.15,2.8C10.05-2.4,9.1-2,8-2S5.95-2.4,5.15-3.2
            C4.383-3.967,4-4.883,4-5.95h2l-3-4l-3,4h2c0,1.633,0.583,3.034,1.75,4.2S6.333,0,8,0s3.083-0.583,4.25-1.75S14-4.333,14-6
            S13.417-9.083,12.25-10.25z"/>
    </g>
</symbol>
<use xlink:href="#replay_icon"  width="14" height="12" y="-12" transform="matrix(1 0 0 -1 10 11)" overflow="visible"/>
</svg>

Upvotes: 19

Bernard
Bernard

Reputation: 281

To follow up on Robert Longson's answer:

Here's an example of how one could do it programmatically (JQuery, Gradients only and without using <defs>):

// run this after the SVG document has loaded

$("svg").each(function (index, elem) {
    var svg = $(elem);
    var symbols = svg.find("symbol");
    svg.append($.merge(symbols.find("radialGradient"), symbols.find("linearGradient")).detach());
});

Upvotes: 0

Related Questions