CODEWITHSUNDEEP
htmlcsssvgline
Nathan30
Nathan30

Reputation: 871

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

Upvotes: 0

Views: 797

Answers (1)

Sergiu Dumitriu
Sergiu Dumitriu

Reputation: 11601

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

Upvotes: 2

Related Questions