SVG 스트로크가있는 폴리 라인 - 라인 결합 : 둥근 모서리가 보이지 않음

Question

내가 생성하는 SVG에서 이상한 렌더링 문제가 발생합니다. 작은 재현성있는 케이스로 좁혔습니다.

는 (적어도 사파리, 맥 크롬 또는 Mac 파이어 폭스에서 볼 때)으로

는

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    <polyline points="41,36 40,35 42,37" style="stroke:black; stroke-linecap:round; stroke-linejoin:round; stroke-width:70"/> 
</svg> 

이 렌더링합니다. 나는 아주 조금 변형 된 원처럼 보이는 것을 기대할 것입니다.

이 나는 ​​뭔가를 놓치고 있습니까? 나는 SVG에 대해 매우 익숙하다. 그래서 간과 한 부분이있다.
이

크롬 11.0.696.25 베타의 모습 (윈도우)가 요구되는 것과 일치 :

을

Answer 1

내가 Windows에서 사파리 v5.0.4에서 렌더링을 확인할 수는 이것이다 문제는 당신이 선택한 세 점이 모두 정확히 한 줄을 따라 180도 회전한다는 사실에서 유래합니다. points="100,0 110,0 90,0"을 사용하면 마찬가지로 '나쁜'결과를 얻습니다. 당신은 사파리에서 41,3641.01,36에 당신이 볼 올바른 결과에서 첫 번째 지점을 변경 (그리고 웹킷은 야간이 게시 등 현재 구축)하는 경우 :

을이 단순히 일부 렌더링 엔진에 ~ 버그가 나타납니다, 특히 라인이 정확하게 180도 회전 할 때 stroke-linejoin:round을 그리는 방법을 선택해야합니다. 이 문제를 a bug report의 일부로 WebKit에 표시하는 a test page을 생성했습니다.