SVG 렌더링 내가이 SVG 샘플을 렌더링 할 때

Question

는, 라인이 자동으로 bluring과 2 픽셀 높이가됩니다 (자동 bluring) :

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >     
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" /> 
</svg> 

을하지만 Y는 250.5된다 좌표 때, 모두가 OK 인 - 라인 1 x 1 픽셀을 가지고 신장.

솔루션 (0.5 픽셀 추가)이지만 elemets에 대한 스케일 변환을 사용해야합니다. 변형 된 elemets에 다시 문제.

어떻게 해결할 수 있습니까? 감사합니다. .

Answer 1

블러 링이란 앤티 앨리어싱을 의미합니다. 선명한 가장자리 렌더링 모드를 사용해보세요 (예 :

).

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >     
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" shape-rendering="crispEdges" /> 
</svg>