调整基于路径的SVG的大小以适合屏幕

Question

我有svg的高度和宽度。我查看了How to scale SVG path to fit the window size，它虽然有帮助，但仍然不够完美。 svg屏幕溢出。我希望它居中，而不要超出视口。这是我的CSS：

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: visible;      
}

高度和宽度分别为400和300的svg如下：

<svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <path d="m..."></path>
    <path d="m..."></path>
</svg>

我将视图框x和y设置为svg的高度和宽度，并且svg位于外部relative容器中。我希望它不超出外部容器的范围。感谢您的任何帮助，谢谢。

Answer 1

简短答案：将viewBox改回原始值，然后设置width="400"和height="300"。他们会将您的SVG缩放到所需大小：）

---

说明：viewBox用作路径描述的参考。如果路径从0,0到1000,1000，并且您将视图框更改为0 0 400 400，则该路径将溢出视图框。

width和height与路径无关，它们将始终缩放元素。

Answer 2

我不小心将viewBox中的高度和宽度调高了。一旦输入正确的值，它就可以正确调整为视口的高度和宽度。

<svg viewBox="min-x min-y x y">