SVG viewbox高度问题在ios Safari上

使用svg时，我注意到了一个奇怪的事情。 svgs似乎在所有其他浏览器中工作正常，但在Safari的ipad / iphone上，viewbox在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/

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

Firefox和最新版本的Chrome浏览器（以及我认为桌面Safari也会）将缩放SVG，使其与一个维度保持一致。但是，其他浏览器将应用默认的高度/宽度，然后缩放图像以适合：

这在浏览器中并不是一个“bug”，只是一个在规范中从未明确定义的特性。

search关于“填充底部纵横比破解”的信息，以便强制浏览器尊重宽高比，同时仍然允许宽度响应。

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

谷歌给我看的是：填充底部的黑客

由于padding-bottom的百分比值是从元素宽度开始的高度，而不是高度本身，所以我们可以利用它来创build没有指定高度的响应元素。

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

对我来说，将所有svgs的宽度和高度设置为100％的技巧就是：

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

感觉比填充黑客清洁得多。