8

我有以下 SVG 示例，它是由 Flash 设计师提供给我的，使用 Adob​​e 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 图像显示在所有浏览器中，甚至是 IE9 (*gasp*)，但它不会显示在 Firefox 中。问题在于线性梯度。如果向路径添加描边，则路径描边正确并变为可见，但未填充。我已经尝试了许多不同的变体来使渐变无法成功。任何人都知道这个 SVG Firefox 的哪个部分有问题以及如何纠正它？

4

2 回答 2

19

从 Firefox 77 开始，此问题已修复。要解决早期版本 Firefox 中的问题，只需将渐变定义移到符号元素之外，例如

<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>
于 2012-10-13T08:03:30.183 回答
0

跟进罗伯特朗森的回答：

这是一个如何以编程方式执行此操作的示例（JQuery，仅渐变和不使用<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());
});
于 2014-11-13T18:32:25.253 回答