Question

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

Answer 1

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似乎首先会删除画布的某些部分然后绘制连接。对于bevel和miter，连接小于删除区域，正如您在此特写中所见：

您可以通过清理路径数据来清除第一个扇区来解决此问题。或者，如果这是不可能的，请设置stroke-linejoin: round。

为什么在Chrome中SVG路径的笔划中出现一些间隙，而它们没有出现在Firefox中？

1 个答案: