线宽是使用 svg 线所需宽度的一半

Question

我想得到一条宽度为 10px 的水平线。我正在使用下面的代码

<svg width="500" >
  <line x1="100" x2="460" y1="0" y2="0" stroke="red" stroke-width="10px"></line>
</svg>

使用上面的代码我得到了 5px 的行。为了获得宽度为 10px

的线，我需要做哪些更改

Answer 1

当 y =“0”时，线条位于 SVG 的顶部边缘 canvas。因此，线宽的一半被切断。由于线宽关于中心线对称

添加一个viewBox并设置行属性y1和y2 > 0例如y1="10"y2="10"

<svg width="600" height="30"  viewBox="0 0 600 30" style="border:1px solid">
  <line x1="100" x2="460" y1="10" y2="10" stroke="red" stroke-width="10px"></line>
</svg>

线宽是使用 svg 线所需宽度的一半

Width of line is half the required width using svg line

html

css

svg

line