ios Safari上的SVG视窗高度问题

概述使用svg时,我注意到ios有一个奇怪的事情. svgs似乎在所有其他浏览器中都可以正常运行,但是在Safari ipad / iphone上,视窗在svg的顶部和底部有一些奇怪的空间.有没有人遇到过这个,你能解决它吗？使用一些简单的svg代码,如： <svg width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width= 使用svg时,我注意到ios有一个奇怪的事情. svgs似乎在所有其他浏览器中都可以正常运行,但是在Safari ipad / iphone上,视窗在svg的顶部和底部有一些奇怪的空间.有没有人遇到过这个,你能解决它吗？使用一些简单的svg代码,如：

<svg wIDth="100%" vIEwBox="0 0 20 10">    <polygon fill=red stroke-wIDth=0 points="0,10 20,10 10,0" /></svg>

在ipad / iphone上,如果我在svg上放置一个边框上方和下方的奇怪的空间svg …？

小心善良在桌面上看起来很正常,但是如果您在ipad等上看到它,您将看到问题.

http://jsfiddle.net/InVAMPED/hck5gg1a/

解决方法 问题是您只设置宽度,而不是SVG布局框的高度. vIEwBox然后使用默认的xMIDYMID会合设置适合此布局框,该设置可以缩放它,以适应更受约束的维度,并将其置于另一个方向.

firefox和最新版本的Chrome(以及我猜测桌面Safari)会缩小SVG,以使您将一个维度保留为auto时的VIEwBox宽高比.但是,其他浏览器将应用默认高度/宽度,然后缩放图像以适合：

> IE应用150px height / 300px宽度,这是嵌入对象的默认值.
> Safari手机必须使用旧的webkit默认值为100vh(浏览器窗口的高度).

这在浏览器中并不是真正的“错误”,只是在规范中从未明确定义过的功能.

搜索关于“padding bottom aspect ratio Hack”的信息,以便强制浏览器尊重宽高比,同时仍然允许宽度响应.

总结

以上是内存溢出为你收集整理的ios Safari上的SVG视窗高度问题全部内容，希望文章能够帮你解决ios Safari上的SVG视窗高度问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。