Pourquoi certaines lacunes apparaissent-elles dans le tracé d'un chemin SVG dans Chrome alors qu'elles n'apparaissent pas dans Firefox?

Lors de l'exécution du code suivant dans Firefox, cela fonctionne bien. Mais dans Chrome, un petit espace blanc apparaît près de l'extrémité supérieure du chemin. Pour les problèmes de qualité, je dois faire disparaître cet écart. Y a-t-il une solution? Pourquoi certaines lacunes apparaissent-elles dans le tracé d'un chemin SVG dans Chrome alors qu'elles n'apparaissent pas dans Firefox?

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>

Source

2017-10-19 Wessam Sharaf

Il semble y avoir un bug dans la mise en œuvre stroke-linejoin de Chrome. L'explication est en deux parties:

Les données de chemin Commençons par les éléments suivants:

M 741 407 C 741 407 741 407 741 407 C 741 406.8125 741.0938 406.5938 741 406.5

Si vous regardez attentivement, vous pouvez voir que les deux premiers points sont identiques, et que le Bézier cubique qui les relie a points de contrôle identiques aux points de départ et d'arrivée. Cela signifie que le chemin entre ces deux points n'a pas de direction, et il n'est pas clair comment un trait de ligne entre ce secteur et le suivant doit être tracé. Pour résoudre ce problème, Chrome suppose que le secteur de longueur nulle va droit vers le haut - un virage assez brusque. En dessinant le linejoin, Chrome semble faussement effacer d'abord une partie de la toile pour ensuite dessiner la jointure. Pour bevel et miter, la jonction est plus petite que la région effacée, comme vous pouvez le voir dans ce plan rapproché:

Vous pouvez résoudre ce problème en nettoyant les données de chemin, l'effacement du premier secteur. Ou si cela est impossible, en réglant stroke-linejoin: round.

Source

2017-10-19 12:32:14 ccprog

Pourquoi certaines lacunes apparaissent-elles dans le tracé d'un chemin SVG dans Chrome alors qu'elles n'apparaissent pas dans Firefox?

Répondre

Questions connexes