SVG垂直线如何随容器高度比例缩放？viewBox设置是否有误？

嘿，这个问题我太熟了！确实是viewBox搭配SVG的默认缩放规则没匹配上导致的，咱们一步步来捋清楚怎么改：

问题根源 #

你当前的viewBox="0 0 100 100"是一个正方形视口，而SVG默认的preserveAspectRatio属性是xMidYMid meet——简单说就是强制保持SVG的宽高比缩放。所以当父容器宽度变化时，SVG会按正方形比例整体缩放，线条高度跟着变；但父容器高度变化时，因为宽高比限制，SVG可能只会在垂直方向留白，不会按比例拉伸线条。

解决方案 #

我们需要调整viewBox的坐标系，再配合CSS让SVG完全贴合父容器的高度，具体步骤如下：

1. 修正viewBox和SVG属性 #

把viewBox改成和垂直线条匹配的范围，同时关闭宽高比限制：

• viewBox="0 0 1 20"：定义SVG内部的坐标系为宽1单位、高20单位，刚好覆盖你那条从y1=0到y2=20的垂直线
• 添加preserveAspectRatio="none"：取消宽高比强制匹配，让SVG可以自由拉伸到设置的宽高

2. 给SVG设置CSS样式 #

让SVG占满父容器的高度，同时设置合适的宽度（对应线条的显示宽度）：

.parent {
  /* 示例高度，实际可以是任意动态值 */
  height: 400px;
  border: 1px solid #ddd; /* 方便看容器范围，可去掉 */
}

.parent svg {
  width: 2px; /* 控制线条的实际显示宽度 */
  height: 100%; /* 让SVG完全占满父容器的高度 */
}

完整修改后的代码 #

<div class="parent">
  <svg viewBox="0 0 1 20" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="0" y2="20" style="stroke: black;stroke-width:1"/>
  </svg>
</div>

额外说明 #

• 如果不想用preserveAspectRatio="none"，也可以保持viewBox的宽高比和父容器一致，但none是最直接的方式，适合只需要垂直拉伸的场景
• stroke-width是SVG内部坐标系的单位，所以配合viewBox的设置，这里设为1刚好对应我们定义的1单位宽度，再通过SVG的width属性控制最终显示的像素宽度

内容的提问来源于stack exchange，提问作者optimus