响应式 SVG，放大 x 轴中心不调整大小

Question

我正在尝试使 SVG 在 x 轴上响应，但我不希望它随 window 缩放。事实上，我想让它保持相同的宽高比，相同的高度，并填充相同的父级div，所以它会在宽度轴中心的视图框中放大。

它看起来像这样：

我目前正在研究视图框并且我有

(for WinWidth < SvgWidth && WinWidth > SvgWidth/ 2) , deltaWidth = SvgWidth - WinWidth

viewbox = ((deltaWidth / 2)     0     (SvgWidth - deltaWidth)     SvgHeight)

但这不起作用，因为父级 div 的顶部和底部仍有空格。你能向我解释一下我错了什么吗？我想这是因为宽度和高度之间的比例不再相同，但我不知道如何安排。提前致谢

Answer 1

正如我所想，这与 svg 的比例与 window 的比例不同有关。这是我简单做的。由于我在互联网上没有看到任何相关信息，也许它可以帮助您，享受 :)

ratioWidth = SvgHeight * WinWidth / WinHeight
viewBox= ((SvgWdth - ratioWidth / 2) 0 ratioWidth SvgHeight)

但正如 enxaneta 所说，您可以使用 `height="100vh" width="100vw" preserveAspectRatio="xMidYMid slice"，在我看来它更干净。