CODEWITHSUNDEEP
svgpath
funkysash
funkysash

Reputation: 198

Prevent narrow svg paths from forming a block

I'm trying to draw a bunch of narrow spaced paths, but sadly they always seem to form a grey block. Example: 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>

Increasing/Decreasing the stroke-width only changes the color a bit. Inspect Elment from Chrome claims that these lines have a width of 2px. How can I get clear black 1px lines spaced by 1 white line?

Upvotes: 0

Views: 64

Answers (1)

methodofaction
methodofaction

Reputation: 72465

The problem is that the lines are being drawn with "half" pixel on the top and the other half on the bottom of the y coordinate. You can enclose the lines in a group element and apply <g transform="translate(0,0.5)">[your paths]</g> or apply the following CSS declaration: path {shape-rendering: crispEdges;}

Upvotes: 1

Related Questions