ios Safari上的SVG视箱高度问题 [英] SVG viewbox height issue on ios Safari

问题描述

我在使用svg时注意到ios上有一个奇怪的东西。 svgs似乎在所有其他浏览器中都能正常工作，但在Safari ipad / iphone上，视图框在svg的顶部和底部有一些奇怪的空间。有没有其他人遇到这个，你有没有能够解决它？使用一些简单的svg代码，例如：

I have noticed a strange thing on ios when using svg. The svgs seem to work fine in all other browsers, but on Safari ipad/iphone the viewbox has some weird space at the top and bottom of the svg. Has anyone else come across this and have you been able to fix it? Using some simple svg code such as:

<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上方和下方都有奇怪的空间。 .. ??

On ipad/iphone if I put a border on the svg there strange space above and below the svg...??

小提琴的好看在桌面上看起来很正常，但如果你在ipad等上看它，你会看到问题。

fiddle goodness looks normal on desktop but if you look at it on an ipad etc you'll see the issues.

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

推荐答案

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

The problem is that you are only setting width, not height of the SVG layout box. The viewBox is then being fit inside this layout box using the default xMidYMid meet setting, which scales it just to fit in the more constrained dimension and centers it in the other direction.

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

Firefox and the latest versions of Chrome (and I guess desktop Safari as well) will scale the SVG to match the viewBox aspect ratio when you leave one dimension as auto. However, other browsers will apply a default height/width, and then scale the image to fit:

• IE应用150px高度/ 300px宽度这是嵌入对象的默认值。


• Safari mobile必须应用旧的webkit默认值100vh（浏览器窗口的高度）。

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

It's not really a "bug" in the browsers, just a feature that was never clearly defined in the specifications.

搜索有关填充底部的信息宽高比黑客是一种强制浏览器尊重宽高比同时仍允许宽度响应的方式。

Search for information about the "padding bottom aspect ratio hack" for a way of forcing the browser to respect an aspect ratio while still allowing the width to be responsive.

这篇关于ios Safari上的SVG视箱高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！