如何在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>

鉴于＆＃34; x＆＃34;和＆＃34; x2＆＃34;我希望这条线是完全垂直的。我对这种类型的编程很陌生，所以我很可能会遗漏一些非常明显的东西，但这不是我期望的行为。

如何使这条线垂直？

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>