SVG Linear Gradient not working in Firefox

Question

I have the following SVG example that was provided to me by a flash designer built using 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> 

SVG image is displayed in all browsers, even IE9 (* gasp *), but it will not be displayed in Firefox. The problem is the linear gradient. If you add a stroke to the path, the path will be correct and become visible, but unfilled. I tried many different options to make the gradient work without success. Does anyone know which part of this SVG Firefox has a problem and how to fix it?

Answer 1

In Firefox, gradients and patterns do not work if they are inside a symbol . To get around this, simply move the gradient definition outside the character element, for example.

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

Answer 2

In response to Robert Longson's answer:

Here is an example of how to do this programmatically (jQuery, Gradients, 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()); });