ViewBox用svg填充

Question

我在一个视图框中有一个图形（svg），如果图形大于视图框，它会缩小以适应，但如果图形小于视图框，则为了填充最大区域，它不是均匀拉伸的视图框。

不明白为什么preserveAspectRatio =“xMidYMid meet”没有达到我想要的效果。

感谢未来的答案

Answer 1

你的术语似乎令人困惑，在你的问题'viewbox'中可能应该被'viewport'取代。

preserveAspectRatio="xMidYMid meet"表示在保持纵横比的同时填充最大空间量，并使svg居中。如果你想填充整个视口，那么你可以使用preserveAspectRatio="xMidYMid slice"，如果有必要，它将切掉svg的某些部分，或preserveAspectRatio="none"拉伸svg，使其完全填满视口但不保留纵横比。

您还可以调整svg上的“viewBox”属性，使其与您要在其中使用的视口的宽高比相匹配。