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