ios Safari上的SVG视图框高度问题答案

【问题标题】：SVG viewbox height issue on ios Safariios Safari上的SVG视图框高度问题
【发布时间】：2020-04-03 02:27:19
【问题描述】：

我在 ios 上使用 svg 时发现了一件奇怪的事情。 svg 似乎在所有其他浏览器中都能正常工作，但在 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 的上方和下方会出现奇怪的空间...？？

fiddle goodness 在桌面上看起来很正常，但如果你在 ipad 等设备上查看它，你会发现问题。

【问题讨论】：

如果我通过 CSS 添加高度，这会将所有内容拉回到一起，但我需要在窗口宽度上缩放以保持纵横比。从进一步阅读来看，这看起来像是不久前 webkit 浏览器中的一个错误。我有一段时间没有更新我的 ipad，所以我想这个问题可能已经通过浏览器更新解决了？？

【解决方案1】：

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

当您将一维保留为auto 时，Firefox 和最新版本的 Chrome（我猜还有桌面版 Safari）将缩放 SVG 以匹配 viewBox 纵横比。但是，其他浏览器会应用默认的高度/宽度，然后缩放图像以适应：

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

搜索有关“填充底部纵横比 hack”的信息，以了解一种强制浏览器尊重纵横比同时仍允许宽度响应的方法。

【讨论】：

【解决方案2】：

AmeliaBR 完全正确，非常感谢您带领我朝着正确的方向前进！

这是 google 向我展示的内容：The padding-bottom hack

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

【讨论】：

对 padding-bottom（或 -top）hack 的总结。但是.container 不需要position: relative吗？
正确的解决方案只有 1 条建议 .container svg { position: absolute;顶部：0；左：0；右：0；底部：0；高度：100%；宽度：100%； }

【解决方案3】：

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

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

感觉比 padding hack 干净很多。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

这对我有用：

.mapContainer svg{
  max-height: 60vw; /* This will depend on the aspect ratio */
}

您需要设置max-height（以vw 为单位）以使svg 在范围内。然后它在任何地方都可以很好地扩展。请注意，max-height 对于不同的 SVG 会有所不同，具体取决于纵横比。

【讨论】：