Search code examples
firefoxsvggradient

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?

Solution

  • 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>