灵活居中的 SVG

Question

我想要居中的灵活 svg：

1. 将缩小父级/窗口宽度/高度调整大小
2. 将自己居中（占用所有可用空间）

我已经设法完成了几乎所有的工作，除了由于某种原因 SVG 不会在窗口调整大小小于 ~100 像素时垂直收缩，但如果你水平收缩窗口，它会：/

Codesandbox example

有什么想法吗？

Answer 1

如果您在 SVG 上使用相对于视口的单元，它会缩小，例如在您的 svg 上设置 height: 100vh。