SVG线性渐变在Firefox中无法工作。

Question

SVG线性渐变在Firefox中无法工作。

8

我有一个SVG的例子，是由一个使用Adobe Illustrator的flash设计师给我制作的：

<?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（惊讶吧），但在Firefox中无法显示。问题出在线性渐变上。如果你给路径添加描边，路径将正确描绘出来但不能填充颜色。我已经尝试了很多不同的变化来解决渐变问题，但都没有成功。有人知道这个SVG的哪部分在Firefox中存在问题以及如何解决吗？

- Greg

我刚刚找到了一个很好的资源来解决这个问题，code.google.com/p/svg-edit/。我可以通过粘贴路径和渐变轻松地从头开始创建SVG，并且由于这是一个可视化编辑器，我可以单击并拖动元素，重新计算它们的路径。它还具有一个很好的功能，可以显示SVG视图之外的内容。但是，我仍然想知道是什么导致上述SVG在Firefox中无法呈现。 - Greg

2个回答

0

针对Robert Longson的回答，以下是如何通过编程实现的示例（使用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());
});

- Bernard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

这个问题从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>