Firefox에 SVG 경로가 보이지 않는데도 SVG 경로의 스트로크에 간격이 나타나는 이유는 무엇입니까?

Firefox에서 다음 코드를 실행하면 잘 작동합니다. 하지만 Chrome에서는 경로의 상단 가까이에 작은 흰색 틈이 나타납니다. 품질 문제에 대해서는이 차이를 사라지게해야합니다. 해결책이 있습니까? Firefox에 SVG 경로가 보이지 않는데도 SVG 경로의 스트로크에 간격이 나타나는 이유는 무엇입니까?

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>

출처

2017-10-19 Wessam Sharaf

크롬의 stroke-linejoin 구현에 버그가있는 것 같습니다.

경로 데이터는 다음과 같이 시작 : 설명은 두 부분으로 당신이 자세히 보면

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

, 당신은 처음 두 지점이 동일한 것을 볼 수 있고, 삼차 베 지어 그들이 가지고 연결하는 것을 시작점과 끝점과 동일한 제어점. 즉,이 두 지점 사이의 경로에는 방향이 없으며이 섹터와 다음 섹터 사이의 라인 조인을 어떻게 그려야하는지 명확하지 않습니다. 이것을 계산적으로 해결하기 위해 Chrome은 길이가 0 인 섹터를 똑바로 세우는 것으로 가정합니다.

라인 결합을 그릴 때 Chrome은 먼저 캔버스의 일부를 지워서 결합을 그립니다. 당신은 첫 번째 섹터를 삭제, 경로 데이터를 정리하여이 문제를 해결할 수

:이 근접 촬영에 볼 수 bevel 및 miter를 들어, 가입, 삭제 된 영역보다 작다. 또는 불가능할 경우 stroke-linejoin: round을 설정하십시오.

출처

2017-10-19 12:32:14 ccprog

Firefox에 SVG 경로가 보이지 않는데도 SVG 경로의 스트로크에 간격이 나타나는 이유는 무엇입니까?

답변

관련 문제