Width of line is half the required width using svg line

Question

I want to get a horizontal line of width 10px. I was using the below code

<svg width="500" >
  <line x1="100" x2="460" y1="0" y2="0" stroke="red" stroke-width="10px"></line>
</svg>

Using the above code I am getting line of 5px. What changes I need to do in order to get line of width 10px

Answer 1

With y = "0", the line is at the top edge of the SVG canvas. Therefore, half of the line width is cut off. Since the line width is symmetrical about the centerline

Add a viewBox and set the line attribute y1 and y2 > 0 for instance y1="10" y2="10"

<svg width="600" height="30"  viewBox="0 0 600 30" style="border:1px solid">
  <line x1="100" x2="460" y1="10" y2="10" stroke="red" stroke-width="10px"></line>
</svg>