防止狭窄的svg路径形成一个块

我想绘制一堆狭窄的间隔路径，但可悲的是，他们似乎总是形成一个灰色的块。实施例：jsfiddle 防止狭窄的svg路径形成一个块

<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中检查Elment声称这些行的宽度为2px。如何获得由1条白线隔开的清晰的黑色1px线？

来源

2014-09-29 funkysash

您还应该注意哪种浏览器，Firefox和Chrome会产生两种明显不同的结果 – 2014-09-29 19:37:49

问题是，线正在绘制，顶部的“半”像素和底部的坐标的另一半。您可以将这些行包含在group元素中，并应用<g transform="translate(0,0.5)">[your paths]</g>或应用以下CSS声明：path {shape-rendering: crispEdges;}

来源

2014-09-29 18:46:23 Duopixel

防止狭窄的svg路径形成一个块

回答

相关问题