iOS Safari中SVG视口高度问题

Question

我注意到在使用SVG时，iOS上出现了奇怪的问题。在所有其他浏览器中，SVG似乎都运行良好，但在Safari iPad/iPhone上，视图框顶部和底部会出现一些奇怪的空间。是否有其他人遇到过这个问题，并且你们能够解决它吗？使用一些简单的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看起来很正常，但是如果你在iPad等设备上查看它，你会看到这些问题。

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

- user2541153

---

如果我通过CSS添加高度，这会将所有内容重新拉回到一起，但我需要它根据窗口宽度进行缩放并保持纵横比。从进一步的阅读中，这看起来像是Webkit浏览器一段时间以前的一个错误。我已经有一段时间没有更新我的iPad了，所以我认为这个问题可能已经在浏览器更新中得到解决了？ - user2541153

Answer 1

问题在于您仅设置了 SVG 布局框的宽度，而没有设置其高度。然后使用默认的 xMidYMid meet 设置将 viewBox 安装在此布局框内，该设置仅将其缩放以适合较为受限制的维度，并使其在另一方向上居中。

Firefox 和最新版本的 Chrome（以及我想也包括桌面版 Safari）将根据 viewBox 纵横比例来缩放 SVG，当您将其中一个维度留空为auto时。但是，其他浏览器会应用默认的高度/宽度，然后缩放图像以适合：

IE 应用内嵌对象的默认值 150px 高/300px 宽。 Safari 移动版可能正在应用旧的 Webkit 默认值 100vh（浏览器窗口的高度）。

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

搜索有关 “padding bottom 纵横比例 hack”的信息，一种可以强制浏览器尊重纵横比例同时仍允许宽度响应式的方法。

- AmeliaBR

---

我将属性preserveAspectRatio="none"添加到我的SVG中，并将高度和宽度设置为100％ - 现在一切都很好。也许值得一试。 - RSeidelsohn

Answer 2

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

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

感觉比填充解决方案更加清晰简洁。

- alexrogers

Answer 3

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

- undervers

---

很好的padding-bottom（或-top）hack总结。但是.container需要position: relative吗？ - nydame

适当的解决方案 只有一个建议 .container svg { 位置：绝对； 顶部：0； 左侧：0； 右侧：0； 底部：0； 高度：100%； 宽度：100%； } - AkshayBandivadekar

Answer 4

我使用这个媒体查询来仅针对Safari浏览器并且适用于SVG高度。

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

- fruttino

Answer 5

这对我有用：

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

您需要设置max-height（以vw为单位），使得SVG在范围内。然后它可以在任何地方进行良好的缩放。请注意，max-height对于不同的SVG会有所不同，具体取决于其宽高比。

- user5566459