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

Answer 1

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

防止狭窄的svg路径形成块

1 个答案: