Google chrome 在Chrome中复杂SVG形状上显示具有多个停止点的线性渐变时出错

在Chrome 23中，我很难显示一个充满水平线性渐变的复杂形状，而在Firefox上，它的显示是正确的

资料来源如下：

和（您可能需要在结果窗口中向下滚动一点）

顺便说一句，如果将Chrome页面的缩放比例降低到75%或更低，渲染效果会更好，但仍然不太正确

---

我是做错了什么，还是这是一个已知的Chrome bug？我在Chromium bug追踪器中找不到它。任何已知的解决方法？

要解决Chrome的bug，您可以应用

spreadMethod=“reflect”

    <defs>
      <linearGradient id="gradient0" x1="0" y1="0%" x2="4.3478260869565215%" y2="0%" spreadMethod="reflect">
        <stop offset="0" stop-color="#000000"></stop>
        <stop offset="1" stop-color="#ffffff"></stop>
      </linearGradient>
    </defs> 

---

我会认为这是基本的SVG，但无论如何…这个问题看起来很像：-这是报告：嗨，埃里克，谢谢你的评论。您所说的基本级别SVG是什么意思？我不确定你链接的bug是否与此相关。无法编辑评论，我的意思是：我认为形状没有那么复杂。我链接到的bug是类似的（但它可能确实是一个单独的问题），无论如何webkit/chrome在渐变停止的相对值上似乎有一些精度问题（只是与其他浏览器相比）。现在是2019年，我仍然有这个bug，有什么解决办法吗？谢谢Duopixel，但不幸的是，斑马色的示例只是一个测试用例，我需要使用不同颜色的多个停止点。在这种情况下，

reflect

值不足以解决该bug。