ViewBox 用 svg 填充
我在视图盒内有一个图形(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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您似乎混淆了术语,在您的问题中,“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 usepreserveAspectRatio="xMidYMid slice"
which will slice away some parts of the svg if necessary, orpreserveAspectRatio="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.