SVG line width issue

问题

I started my svg learning. And I want to do some skills bar with the svg line.

But there is something I didn't understand. I create 2 lines per skills (one empty, and one with the percentage of knowledge).

The problem is : The two first lines have half the height I give with stroke width. And the other lines have the good height...

here is a jsbin : http://jsbin.com/lewimonize/edit?html,css,output

Thanks in advance

回答1:

Short answer: the line is clipped in half by the view box.

When you draw a line on the y="0" axis, half of the line width is above the axis, and half is below it. Combined with the viewBox which starts at y=0, the half of the line that is above will be clipped.

You have three options:

• Move the lines lower, so that the first one starts at y1="2.5", for example
• Move the viewbox up: viewBox="0 -2.5 100 100"
• Add overflow="visible" to the svg element

来源：https://stackoverflow.com/questions/37065569/svg-line-width-issue