Firefox Illustrator到SVG：不同浏览器的不同色调

从下图中可以看出，我在Adobe Illustrator中创建的项目在以SVG格式保存后已损坏：

项目组成部分：

已完成项目/SVG:

---

SVG选项：
SVG配置文件：SVG 1.1
选项：
图像位置：链接

我很想知道我做错了什么，如果我应该合并路径而不是重叠路径，或者其他什么

最小可重复示例 尝试创建一个可复制的示例时，我意识到第二层中的路径以一种奇怪的方式反应，如果将渐变滑块设置为50%或更高，在mozilla firefox中，渐变将更加轻松，失去#F6EC48颜色

<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="554.074px" height="237.102px" viewBox="0 0 554.074 237.102" enable-background="new 0 0 554.074 237.102"
     xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="255.4512" y1="97.5811" x2="293.5728" y2="163.6096">
    <stop  offset="0" style="stop-color:#000000;stop-opacity:0.8"/>
    <stop  offset="1" style="stop-color:#F6EC48;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10" d="M238.048,152.873
    c18.596,22.147,77.841,13.558,80.465-15.033c2.625-28.591-24.098-54.162-41.876-51.329
    C258.858,89.344,225.774,138.256,238.048,152.873z"/>
</svg>

问题可能是mozilla firefox不支持的颜色？

---

小更新：
问题似乎是路径的容器倾斜，我发布的第一个容器倾斜了几个等级：

问题发生时。相反，当路径的容器水平时：

这个问题似乎已经消失了。 下面是第二幅图像的代码：

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="554.074px" height="237.102px" viewBox="0 0 554.074 237.102" enable-background="new 0 0 554.074 237.102"
     xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="231.3887" y1="177.9214" x2="315.833" y2="177.9214" gradientTransform="matrix(0.5844 0.8114 -0.8114 0.5844 265.1226 -213.5356)">
    <stop  offset="0" style="stop-color:#000000;stop-opacity:0.8"/>
    <stop  offset="0.0617" style="stop-color:#1D1D16;stop-opacity:0.7507"/>
    <stop  offset="0.1976" style="stop-color:#47452D;stop-opacity:0.6419"/>
    <stop  offset="0.3352" style="stop-color:#6F6B3C;stop-opacity:0.5318"/>
    <stop  offset="0.4719" style="stop-color:#989245;stop-opacity:0.4225"/>
    <stop  offset="0.6073" style="stop-color:#BCB449;stop-opacity:0.3141"/>
    <stop  offset="0.7412" style="stop-color:#D9CF4A;stop-opacity:0.207"/>
    <stop  offset="0.873" style="stop-color:#EDE248;stop-opacity:0.1016"/>
    <stop  offset="1" style="stop-color:#F6EC48;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10" d="M235.332,96.394c-7.2,28.412,34.958,72.049,60.028,57.272
    c25.069-14.777,30.271-51.903,17.409-64.846C299.907,75.876,240.083,77.641,235.332,96.394z"/>
</svg>

正如您所看到的，渐变变换显示了更多偏移

---

有人能解释一下发生了什么吗？我直接在不同的浏览器中测试你的代码，看起来不同浏览器中的图像没有什么区别。结果在不同的浏览器中都是一样的。@YuZhou你试过mozilla firefox吗？我把它放进了浏览器是的，我也试过Firefox71。你可以检查结果。可能是不同的浏览器版本导致了问题。您可以尝试将Firefox更新到最新版本，然后再试一次。@YuZhou我不理解xd