Html SVG图像未与100vh视口中的“对象匹配”对齐

我试图让SVG图像与100vh全屏容器中的对象匹配度相当。根据我所能收集到的信息，我需要使用preserveSpectratio=xMidYMid切片属性，并设置width=100%height=100%

但我好像没法让它工作？当我使用它时，容器底部会显示一大块空白，或者当图像填充视口时，视口会变得比100vh大很多

请注意，我不能使用CSS背景图像属性，因为它是我正在构建的更广泛的SVG/Javascript动画的一部分

代码笔：

有人知道这里出了什么问题，解决办法是什么吗

提前感谢您的帮助/想法

身体{ 保证金：0； 填充：0； 显示器：flex； 宽度：100%； 高度：100vh； 证明内容：中心； 对齐项目：居中； } 第1节，背景剪裁{ 宽度：100%； 身高：100%； }

---

工作中存在多种尺寸调整机制；一个用于元素，一个用于元素

您为元素设置的元素不是真正有用的。viewBox属性适合容器内100 x 100个用户单位的坐标系。然后，此坐标系是视口，用于使用隐式PreserveSpectratio=xMidYMid meet调整大小。如果你感到困惑：是的，这就是问题所在

相反，只需调整元素的大小以填充容器。移除视图框，将宽度和高度设置为100%。如果没有viewBox，PreserveSpectRatio也不会对元素产生影响

现在，只有图像的大小调整机制才能将图像调整到视口的100%宽度和高度，如PreserveSpectRatio所述，它会生效并按您的意愿工作

一般说明：JPG，如您的应用程序中所使用的，具有固有的纵横比。因此，PreserveSpectratio将始终具有效果。一个元素没有。只有视图框有一个。这就是属性的作用

身体{ 保证金：0； 填充：0； 显示器：flex； 宽度：100%； 高度：100vh； 证明内容：中心； 对齐项目：居中； } 第1节，背景剪裁{ 宽度：100%； 身高：100%； }

---

在我看来，如果这不是一个正方形的图像，那么你的视图框是错误的。也许没有关系，这是个很好的答案。我意识到，就在您回答我的代码时，我犯了一个错误，我错误地将preserveAspectRatio属性放在了我的元素上，而不是。但希望这不会影响事情。哦，该死的，它确实会影响事情。我在两者上都添加了PreserveSpectratio，这似乎解决了问题。再次感谢。我没有在元素上设置PreserveSpectRatio是有原因的。请参见编辑。