좁은 svg 경로가 블록을 형성하는 것을 방지하십시오.

Question

좁은 간격의 경로를 그리려는데 슬프게도 항상 회색 블록을 형성하는 것처럼 보입니다. 예 : jsfiddle

<svg overflow="hidden" width="200" height="200" style="width: 200px; height: 200px;"> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 164L 200 164"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 166L 200 166"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 168L 200 168"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 170L 200 170"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 172L 200 172"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 174L 200 174"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 176L 200 176"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 178L 200 178"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 180L 200 180"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 182L 200 182"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 184L 200 184"></path> 
    <path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 186L 200 186"></path> 
</svg> 

가 stroke-width 증가/감소는 색상 만 약간 변경합니다. Chrome의 Inspect Elment는이 행의 너비가 2 픽셀이라고 주장합니다. 검은 색 1px 선을 1 개의 흰색 선으로 간격을 띄우려면 어떻게해야합니까?

Answer 1

문제는 선이 "절반"픽셀로 그려지고 다른 한쪽이 y 좌표의 아래쪽에 그려지는 것이 문제입니다. group 요소에 줄을 묶고 <g transform="translate(0,0.5)">[your paths]</g>을 적용하거나 다음 CSS 선언을 적용하십시오. path {shape-rendering: crispEdges;}