ios Safari上的SVG视箱高度问题

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%;
}

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

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

IE应用150px高度/ 300px宽度,这是嵌入对象的默认宽度.

Safari mobile必须应用旧的webkit默认值100vh(浏览器窗口的高度).

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

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