SVG 픽셀 스냅을 처리하는 방법

Question

path 요소를 사용하여 두 개의 svg 행을 렌더링하려고합니다. 첫 번째 줄의 너비는 1px이며 선명합니다. 두 번째 줄의 너비는 2px이며 흐리게 처리됩니다.
획 폭은 두 가지 모두 동일합니다. 주로는 라인이 선명하게 오프셋 0.5의이

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<path style="stroke-width:1;stroke:red;opacity:1;" d="M 300.5 250 L 300.5 300 "></path> 
<path style=" stroke-width:1;stroke:red;opacity:1;" d="M 350 250 L 350 300 "></path> 
</svg> 

Answer 1

를 해결하는 방법. By default, integer coordinates map to the intersections of the pixel squares. So a width-1 horizontal/vertical line is centered on the boundary between pixel rows and extends half way into the pixels on either side.

두 번째 줄을 고정하려면 좌표에 0.5를 더하거나 스타일 shape-rendering: crispEdges을 사용하십시오. crispEdges은 앤티 엘리 어싱을 방지하므로 수평/수직 선이 선명하지만 각진 선이 고르지 않게 보입니다.

또한 stroke-width = 1은 유효한 CSS 구문이 아닙니다. 첫 번째 예제의 stroke-width : 1은 맞습니다.