如何在SVG中绘制垂直线

Question

我想用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>

鉴于"x"和"x2"是相同的,我预计该线将是完全垂直的.我对这种类型的编程很新,所以我可能会遗漏一些非常明显的东西,但这不是我期望的行为.

如何使此线垂直？

Answer 1

你想要x1,而不是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>