当 viewBox 从 0 开始时，为什么 y=0 不会将 svg-circle 粘到顶部

Question

它基本上有一个小的 html 文件，其中包含以下 html：

<svg viewBox="0 0 400 15">
  <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>

但是输出看起来像这样：

我原以为这条线和圆心会粘在顶部。由于 y 坐标在从 0 开始的坐标空间中为 0，如

viewBox=0 0 400 15

.

中所定义

我在这里缺少什么？

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

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

Answer 1

这是一个很好的问题。而且看起来像是固定在顶部的。但 SVG 具有使其具有响应能力并使其在全屏居中的特性。

    svg {
      background: gray;
      width: 100vw;
      height: 100vh;
    }

上面的 CSS 以及缺少的高度和宽度属性允许 SVG 缩放。它被告知消耗所有可用的宽度和高度，从而使其居中。删除 CSS 可以修复屏幕顶部的元素。

html, body {
  margin: 0;
}

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