在 Firefox 中运行以下代码时，它运行良好。但是在 Chrome 中，路径的上端附近会出现一个白色的小间隙。对于质量问题，我需要让这个差距消失。有解决办法吗？
svg path {
shape-rendering: geometricPrecision;
stroke-linecap: round;
stroke-linejoin: bevel;
}<!DOCTYPE html>
<html>
<body>
<svg viewBox="700 400 1000 1000">
<path data-start="2" fill="none" stroke="#F8A602" stroke-width="10" d="M 741 407 C 741 407 741 407 741 407 C 741 406.8125 741.0938 406.5938 741 406.5 C 740.9063 406.4063 740.5 406.3841 740.5 406.5 C 740.5 406.7591 740.7344 407.1813 741 407.5 C 741.6719 408.3063 742.1871 408.8226 743 409.5 C 744.4371 410.6976 745.4802 411.4023 747 412.5 C 748.8552 413.8398 750.1091 414.7108 752 416 C 754.2341 417.5233 755.7659 418.4767 758 420 C 759.8909 421.2892 761.1581 422.1428 763 423.5 C 764.7206 424.7678 765.7795 425.7322 767.5 427 C 769.342 428.3572 770.6377 429.1698 772.5 430.5 C 774.5752 431.9823 775.9409 432.9953 778 434.5 C 780.8159 436.5578 782.6698 437.9622 785.5 440 C 787.3573 441.3372 788.6448 442.1602 790.5 443.5 C 792.0198 444.5977 793.0106 445.3611 794.5 446.5 C 796.1981 447.7986 797.3125 448.6875 799 450 C 800.6875 451.3125 801.7795 452.2322 803.5 453.5 C 805.342 454.8572 806.6906 455.6018 808.5 457 C 810.8156 458.7893 812.25 460.125 814.5 462 C 816.75 463.875 818.2838 465.086 820.5 467 C 822.4088 468.6485 823.5717 469.8762 825.5 471.5 C 827.1342 472.8762 828.2505 473.7754 830 475 C 832.0005 476.4004 833.4524 477.1646 835.5 478.5 C 837.7649 479.9771 839.2351 481.0229 841.5 482.5 C 843.5476 483.8354 844.9375 484.6875 847 486 C 849.0625 487.3125 850.4664 488.1442 852.5 489.5 C 854.4039 490.7692 855.7066 491.5842 857.5 493 C 859.2691 494.3967 860.3009 495.5133 862 497 C 863.3009 498.1383 864.2799 498.7799 865.5 500 C 867.4674 501.9674 868.5835 503.4771 870.5 505.5 C 871.9585 507.0396 872.9503 508.0536 874.5 509.5 C 875.7628 510.6786 876.6804 511.3834 878 512.5 C 879.1179 513.4459 879.9697 513.9697 881 515 C 881.8447 515.8447 882.1553 516.6553 883 517.5 C 884.0303 518.5303 884.9697 518.9697 886 520 C 886.8447 520.8447 887.263 521.5524 888 522.5 C 888.5755 523.2399 888.9153 523.7692 889.5 524.5 C 889.6653 524.7067 890.0777 524.9223 890 525 C 889.8902 525.1098 889.3481 525.1266 889 525 C 887.2856 524.3766 886.147 523.8235 884.5 523 C 883.897 522.6985 883.5625 522.375 883 522 "></path>
</svg>
</body>
</html>最佳答案
Chrome 的 stroke-linejoin 实现中似乎存在错误。解释分为两部分:
路径数据以下列开头:
M 741 407 C 741 407 741 407 741 407 C 741 406.8125 741.0938 406.5938 741 406.5
如果仔细观察，您会发现前两个点是相同的，并且连接它们的立方贝塞尔曲线的控制点与起点和终点相同。这意味着这两点之间的路径没有方向，并且不清楚如何绘制这个扇区和下一个扇区之间的连线。为了通过计算解决这个问题，Chrome 假设零长度扇区直线上升 - 一个非常急转弯。
在绘制 linejoin 时，Chrome 错误地似乎先删除 Canvas 的某些部分然后绘制连接。对于 bevel 和 miter，连接小于删除区域，如您在此特写中所见:
您可以通过清理路径数据、删除第一个扇区来解决此问题。或者，如果这是不可能的，通过设置 stroke-linejoin: round。
关于javascript - 为什么在 Chrome 中 SVG 路径的笔画中会出现一些间隙，而在 Firefox 中却没有？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46828893/