How to draw a vertical line in SVG

Question

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?

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>

Comments

[Harry]

Typo. It should be x1. Since you've not defined x1 it is getting assumed as 0 and so the angular line.

[AthMav]

why dont you use a program like inkscape?

[johnchase]

Of course it was something so obvious. I'm still getting used to web programming where things don't throw horrible traceback errors with typos. Thanks you very much for your answer!