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等上看它，你会看到问题。

Answer 1

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

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

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

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

Answer 2

AmeliaBR是完全正确的，非常感谢我带领我走向正确的方向！

以下是谷歌向我展示的内容：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%;
}

Answer 3

我使用此媒体查询仅定位safari浏览器，并以svg高度工作。

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

Answer 4

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

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

感觉比填充黑客更清洁。

Answer 5

这对我有用：

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

您需要设置max-height（以vw为单位），以使svg在边界内。然后它到处都很好地扩展。请注意，不同SVG的最大高度将有所不同，具体取决于宽高比。