响应式 SVG，放大 x 轴的中心而不调整大小答案

【问题标题】：Responsive SVG, zoom in the center of x axis not resize响应式 SVG，放大 x 轴的中心而不调整大小
【发布时间】：2023-03-23 16:39:01
【问题描述】：

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

看起来像这样：

我目前正在玩视图框，我有

(对于 WinWidth SvgWidth/ 2) , deltaWidth = SvgWidth - WinWidth

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

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

【问题讨论】：

您可以使用preserveAspectRatio" 属性。例如你可以有`height="100vh" width="100vw" preserveAspectRatio="xMidYMid slice"`
很好，我从未听说过 Slice 选项 .. 应该有，这比我的做法更干净！谢谢

标签： html css svg

【解决方案1】：

正如我所想，它与 svg 的比例与窗口的比例不同。这是我简单制作的。由于我在互联网上没有看到任何关于此的内容，也许它可以提供帮助，享受:)

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

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

【讨论】：