为何viewBox起始为0时，y=0的SVG圆形无法贴顶？

核心问题是SVG默认的preserveAspectRatio属性行为：当你设置了viewBox且SVG视口（这里是全屏宽高）和viewBox的宽高比不一致时，默认值xMidYMid meet会把viewBox的内容垂直+水平居中显示在视口中，这就导致viewBox里y=0的位置并没有对齐SVG视口的顶部，而是被移到了视口中间区域。

另外你代码里的<line>标签未闭合，需要修正为自闭合形式以避免潜在渲染问题。

修正步骤 #

1. 给SVG添加preserveAspectRatio="xMinYMin meet"属性，让viewBox的左上角对齐SVG视口的左上角，这样y=0的元素就会紧贴顶部。
2. 闭合<line>标签。
3. （可选）如果希望圆形完全显示在viewBox范围内，将circle的cy值改为5（半径为5，这样圆的顶部刚好落在y=0的位置）。

修改后的代码 #

<svg viewBox="0 0 400 15" preserveAspectRatio="xMinYMin meet">
  <circle cx="200" cy="0" r="5" fill="black"/>
  <line x1="0" x2="400" y1="0" y2="0" stroke="black"/>
</svg>

<style>
html, body {
  margin: 0;
}
svg {
  background: gray;
  width: 100vw;
  height: 100vh;
}
</style>

补充说明preserveAspectRatio参数：

• xMinYMin：viewBox的x最小值（0）对齐视口左边缘，y最小值（0）对齐视口上边缘。
• meet：保持viewBox宽高比，缩放内容使其完全适应视口（不裁剪内容），若视口与viewBox宽高比不一致，会在对应方向留空白；若想让内容填满视口允许裁剪，可替换为slice。

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