调整基于路径的 SVG 大小以适应屏幕答案

【问题标题】：Resizing path-based SVG to fit the screen调整基于路径的 SVG 大小以适应屏幕
【发布时间】：2018-07-12 14:26:44
【问题描述】：

我有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 容器中。我希望它不要超出外部容器的范围。任何帮助表示赞赏，谢谢。

【问题讨论】：

【解决方案1】：

简答： 将viewBox 改回原来的值并设置width="400" 和height="300"。他们会将您的 SVG 缩放到所需的大小:)

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

width 和 height 独立于路径，它们将始终缩放元素。

【讨论】：

【解决方案2】：

我不小心调高了viewBox 的高度和宽度。一旦我输入了正确的值，它就会正确调整到视口的高度和宽度。

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

【讨论】：