ViewBox 用 svg 填充

发布于 2025-01-08 09:20:59 字数 161 浏览 8 评论 0原文

我在视图盒内有一个图形(svg),如果图形大于视图盒,它会缩小以适应,但如果图形小于视图盒,它不会均匀拉伸以填充视图盒中的最大区域。

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

感谢未来的答案

I have a graph (svg) inside a viewbox, if the graph is bigger than the viewbox it is shrank to fit, but if the graph is smaller than the viewbox it is not uniformed stretched in order to fill the maximum area in the viewbox.

don't understand why preserveAspectRatio="xMidYMid meet" doesn't make what i want.

thanks for future answers

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

世态炎凉 2025-01-15 09:20:59

您似乎混淆了术语,在您的问题中,“viewbox”可能应该替换为“viewport”。

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

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

You seem to be confusing terminology, in your question 'viewbox' should probably be replaced by 'viewport'.

preserveAspectRatio="xMidYMid meet" means to fill the maximum amount of space while still maintaining the aspect ratio, and to center the svg. If you want to fill the entire viewport then you can either use preserveAspectRatio="xMidYMid slice" which will slice away some parts of the svg if necessary, or preserveAspectRatio="none" which stretches the svg such that it completely fills the viewport but without preserving the aspect ratio.

You can also adjust the 'viewBox' attribute on the svg such that it matches the aspect ratio of the viewport you want to use it in.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文