ios Safari上的SVG viewbox高度問題

使用svg時，我注意到ios上有一件奇怪的事情。 svgs似乎在所有其他瀏覽器中都能正常工作，但在Safari ipad/iphone上，viewbox在svg的頂部和底部有一些奇怪的空間。有沒有其他人遇到過這個問題，並且你能夠修復它？使用一些簡單的SVG代碼，如：ios Safari上的SVG viewbox高度問題

<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/

來源

2014-09-29 user2541153

如果我通過CSS添加高度，將所有內容拉回到一起，但我需要在窗口寬度上縮放以保持寬高比。從進一步閱讀看，這看起來像是在webkit瀏覽器中的一個bug。我沒有更新我的ipad在一段時間，所以我想這個問題可能已經解決了瀏覽器更新？ – user2541153 2014-09-29 14:42:17

的問題是，你只設置寬度，而不是SVG佈局框的高度。然後使用默認的xMidYMid meet設置將viewBox放置在此佈局框中，該設置縮放它以適應更多的約束維度並使它在另一個方向居中。

當您將一維標註爲auto時，Firefox和最新版本的Chrome（以及我認爲桌面Safari也會）將縮放SVG以匹配viewBox縱橫比。但是，其他瀏覽器將應用默認高度/寬度，然後縮放圖像以適合：

IE應用150px高度/ 300px寬度，這是默認的嵌入對象。
Safari移動設備必須應用100vh（瀏覽器窗口高度）的舊webkit默認值。

這不是瀏覽器中的一個「bug」，只是一個在規範中從未明確定義的功能。

搜索有關「填充底部寬高比破解」的信息，以便強制瀏覽器尊重寬高比，同時仍允許寬度響應。

來源

2014-09-29 17:22:29 AmeliaBR

我在我的svg中添加了「preserveAspectRatio =」none「'屬性，並將高度和寬度設置爲100％ - 現在都很好。也許值得嘗試一下。 – RSeidelsohn 2017-05-19 15:12:10

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

來源

2015-01-07 16:58:49 undervers

填充底部（或頂部）黑客的極好摘要。但是不。容器需要'位置：相對'？ – nydame 2015-04-09 23:39:28

對於我來說，寬度和高度爲100％設定爲所有svgs的伎倆：

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

感覺比填充黑客清潔得多。

來源

2016-06-02 14:37:25 alexrogins

這爲我工作：

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

您需要設置最大高度（在大衆單位），使得SVG是範圍之內。然後它在任何地方都很好地擴展請注意，對於不同的SVG，最大高度會有所不同，具體取決於寬高比。

來源

2018-03-09 11:12:20 peerless

ios Safari上的SVG viewbox高度問題

回答

相關問題