使用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”的信息,以便强制浏览器尊重宽高比,同时仍然允许宽度响应.