How to draw a vertical line in SVG

css, html, svg

Solution

you want x1, not x

<style>
  svg#chart {
    background: lightgray;
  }
  #chart line {stroke: #555555; stroke-width:1}
</style>
<svg id="chart" width="300" height="225">
  <line x1="20" y1="20" x2="20" y2="130"></line>
</svg>

Problem

I am trying to draw a vertical line with SVG. ``` <style> svg#chart { background: lightgray; } #chart line {stroke: #555555; stroke-width:1} </style> <svg id="chart" width="300" height="225"> <line x="20" y1="20" x2="20" y2="130"></line> </svg> ``` Given that "x" and "x2" are the same I would have expected the line to be completely vertical. I'm pretty new to this type of programming, so I am likely missing something very obvious, however this is not the behavior I would have expected. How do I make this line vertical?

Original source