SVG line width issue

Question

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 o

Answer 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