Why do only the first two curves of this SVG display in Firefox?

自闭症网瘾萝莉.ら 提交于 2021-01-29 07:22:52

问题


Why does this SVG display in its entirety in Chrome, but not in Firefox? It is handcrafted, and I'm trying to figure out if I missed something, or I'm using it incorrectly - or, if it's instead just a problem with Firefox.

The correct display would seem to be Chrome's (six 'bumps' visible), while in Firefox it only displays the first two curves (the first 'bump').

<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>

Note: There is a similar question from 5 years ago, Why are my SVG bezier curves broken in Firefox? However it seems to be unresolved, and a tangentially related bug linked there was fixed at that time.


回答1:


From this reference, you have not made the svg path d correctly due to the rules.

Also reference this.

The problem is the comma between statements.

<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>


来源:https://stackoverflow.com/questions/64433552/why-do-only-the-first-two-curves-of-this-svg-display-in-firefox

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!