SVG는 서로 다른 두께

Question

내가 화면에 여러 개의 선을 그릴려고

로 선을 그립니다 만, 어떤 이유로 세 번째 라인은 내가 각 요소에 대해 동일한 두께를 지정한 경우에도 나머지 부분보다 두껍게 그려됩니다 :

<svg height="210" width="500" style="margin-left:100px;margin-top:100px;"> 
    <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(50, 50, 50);stroke-width:1" /> 
    <line x1="0" y1="0" x2="0" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> 
    <line x1="0" y1="200" x2="200" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> 
</svg> 

이 설정되어있는 경우

The weird result

내가 처음 두 행을 제거 할 경우, 세 번째 줄은 여전히 ​​이상한 두께 문제를 제공, 내가 세 번째 줄 0으로 Y2를 설정하면, 선 두께가 사라질 것으로 나타났습니다 만, 회전하지 않아도 두꺼운 상태로 유지됩니다. 이 문제에 대한 정보를 찾을 수없는 것 같습니다. 이는 Chrome과 Firefox 모두에서 발생합니다. 어떤 제안? 감사!

Answer 1

첫 번째 두 줄의 스트로크 너비의 절반이보기에 있지 않기 때문에 (1/2 픽셀 너비는 <입니다). 당신은 약간 이미지를 조정하여 고정 볼 수 있습니다

<svg height="210" width="500" style="margin-left:100px;margin-top:100px;"> <line x1="0" y1="1" x2="200" y2="1" style="stroke:rgb(50, 50, 50);stroke-width:1" /> <line x1="1" y1="0" x2="1" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> <line x1="0" y1="200" x2="200" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> </svg>

https://jsfiddle.net/uax2zj7g/