johnchase johnchase - 1 month ago 18
CSS Question

How to draw a vertical line in SVG

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>


enter image description here

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?

Answer

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>