为什么在 Firefox 中只显示此 SVG 的前两条曲线？答案

【问题标题】：Why do only the first two curves of this SVG display in Firefox?为什么在 Firefox 中只显示此 SVG 的前两条曲线？
【发布时间】：2021-02-02 14:18:43
【问题描述】：

为什么这个 SVG 会在 Chrome 中完整显示，而在 Firefox 中却没有？它是手工制作的，我想弄清楚我是否遗漏了什么，或者我使用不正确 - 或者，它是否只是 Firefox 的问题。

正确的显示似乎是 Chrome 的（六个可见的“凹凸”），而在 Firefox 中它只显示前两条曲线（第一个“凹凸”）。

<svg width="450" height="50" viewBox="0 0 450 50">
  <path d="M0,0 C13.642086,0,23.815591,50,37.457677,50 C51.099763,50,61.273268,0,74.91535384383405,0,C88.557440,0,98.730945,50,112.37303,50 C126.01512,50,136.18862,0,149.8307076876681,0,C163.47279,0,173.64630,50,187.28838,50 C200.93047,50,211.10398,0,224.74606153150216,0,C238.38815,0,248.56165,50,262.20374,50 C275.84582,50,286.01933,0,299.6614153753362,0,C313.30350,0,323.47701,50,337.11909,50 C350.76118,50,360.93468,0,374.5767692191703,0,C388.21886,0,398.39236,50,412.03445,50 C425.67653,50,435.85004,0,449.4921230630043,0"></path>
</svg>

注意：5年前有一个类似的问题，Why are my SVG bezier curves broken in Firefox? 然而，它似乎没有得到解决，并且当时已修复了与那里相关的一个切线相关的错误。

【问题讨论】：

Firefox 是正确的，是 Chrome 没有正确实现 SVG 规范。

标签： html firefox svg

【解决方案1】：

从这个reference，由于规则，你没有正确地创建svg path d。

还有reference this。

问题是语句之间的comma。

<svg width="450" height="50" viewBox="0 0 450 50">
  <path d="M0 0 C13.642086 0 23.815591 50 37.457677 50 C51.099763 50 61.273268 0 74.91535384383405,0 C88.557440 0 98.730945 50 112.37303 50 C126.01512 50 136.18862 0 149.8307076876681,0 C163.47279 0 173.64630 50 187.28838 50 C200.93047 50 211.10398 0 224.74606153150216,0 C238.38815 0 248.56165 50 262.20374 50 C275.84582 50 286.01933 0 299.6614153753362,0 C313.30350 0 323.47701 50 337.11909 50 C350.76118 50 360.93468 0 374.5767692191703,0 C388.21886 0 398.39236 50,412.03445 50 C425.67653 50 435.85004 0 449.4921230630043 0"></path>
</svg>

【讨论】：