ios Safari上的SVG视箱高度问题

Question

我在使用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/

Answer 1

问题是您只设置宽度,而不是SVG布局框的高度.然后使用默认xMidYMid meet设置将viewBox放入此布局框内,默认设置将其缩放以适应更受约束的尺寸,并将其置于另一个方向的中心.

Firefox和最新版本的Chrome(我猜桌面Safari也是如此)会缩放SVG,以便在保留一个维度时匹配viewBox纵横比auto.但是,其他浏览器将应用默认的高度/宽度,然后缩放图像以适合:

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

它在浏览器中并不是一个"错误",只是一个从未在规范中明确定义的功能.

搜索有关"填充底部宽高比黑客"的信息,以强制浏览器尊重宽高比,同时仍允许宽度响应.

Answer 2

对我来说，将所有 svg 的宽度和高度设置为 100% 就成功了：

svg {
    width: 100%;
    height: 100%;
}

感觉比 padding hack 干净多了。

Answer 3

我使用此媒体查询仅针对 safari 浏览器并使用 svg 高度。

@supports (-webkit-backdrop-filter: blur(1px)) {
  svg {
    height: intrinsic;
  }
}

Answer 4

AmeliaBR是完全正确的,非常感谢带领我朝着正确的方向前进!

以下是谷歌向我展示的内容:填充底层黑客

因为百分比值padding-bottom从元素的宽度获得它的高度而不是高度本身,我们可以利用它来创建没有指定高度的响应元素.

在SVG容器上:

.container {
    padding-bottom: 70%; /*this is your height/width ratio*/
    height: 0;
  }

在SVG元素本身:

.container svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}