Problem z wysokością okna podglądu SVG na ios Safari

Zauważyłem dziwną rzecz na ios podczas używania svg. Svgy działają dobrze we wszystkich innych przeglądarkach, ale w Safari ipad/iphone viewbox ma dziwną przestrzeń u góry iu dołu svg. Czy ktoś inny natknął się na to i czy byłeś w stanie to naprawić? Stosując kilka prostych kodu SVG, taki jak:Problem z wysokością okna podglądu SVG na ios Safari

<svg width="100%" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> 
</svg>

na iPad/iPhone gdybym dodać ramkę na SVG tam dziwne miejsca powyżej i poniżej SVG ... ??

dobroć skrzypienia wygląda normalnie na pulpicie, ale jeśli spojrzysz na to na iPadzie itp., Zobaczysz problemy.

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

Źródło

2014-09-29 user2541153

Jeśli dodaję wysokość za pomocą CSS, ściągam wszystko z powrotem, ale potrzebuję tego do skalowania na szerokości okna zachowując proporcje. Od dalszego czytania wygląda to jak błąd w przeglądarkach Webkit jakiś czas temu. Nie aktualizowałem mojego iPada od jakiegoś czasu, więc myślę, że ten problem mógł zostać rozwiązany dzięki aktualizacji przeglądarki? – user2541153

Problemem jest to, że ustawiasz tylko szerokość, a nie wysokość skrzynki układu SVG. Widok box jest następnie dopasowywany w tym polu układu przy użyciu domyślnego ustawienia xMidYMid meet, które skaluje je tylko w celu dopasowania do bardziej ograniczonego wymiaru i centrowania w innym kierunku.

Firefox i najnowsze wersje Chrome (i prawdopodobnie również Safari na komputery) przeskaluje SVG do proporcji widoku ViewBox, gdy zostawisz jeden wymiar jako auto. Jednak inne przeglądarki zastosują domyślną wysokość/szerokość, a następnie przeskalują obraz do rozmiaru:

IE stosuje szerokość 150 pikseli/300 pikseli, która jest domyślna dla obiektów osadzonych.
Safari mobile musi być zgodne ze starszą wersją domyślną 100vh (wysokość okna przeglądarki).

To naprawdę nie jest "błąd" w przeglądarkach, tylko funkcja, która nigdy nie została wyraźnie określona w specyfikacjach.

Wyszukaj informacje na temat "wyrównywania proporcji ekranu", aby zmusić przeglądarkę do zachowania proporcji przy jednoczesnym zachowaniu odpowiedniej czułości szerokości.

Źródło

2014-09-29 17:22:29 AmeliaBR

Dodałem atrybut "preserveAspectRatio =" none "" do mojego svg i ustaw wysokość i szerokość na 100% - teraz wszystko jest w porządku. Może być warte spróbowania. – RSeidelsohn

AmeliaBR ma całkowitą rację, wielkie dzięki za prowadzenie we właściwym kierunku!

Oto co google pokazał mi: The padding-bottom hack

Ponieważ wartość procentowa padding-bottom dostaje to wysokość od szerokości elementu, a nie sama wysokość możemy wykorzystać to do tworzenia elementów reagujących bez określonej wysokości.

na pojemniku SVG:

.container { 
    padding-bottom: 70%; /*this is your height/width ratio*/ 
    height: 0; 
    }

na elemencie SVG samego:

.container svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
}

Źródło

2015-01-07 16:58:49 undervers

Wspaniałe podsumowanie hackowania padding-bottom (lub -top). Ale nie .container potrzebujesz 'position: relative'? – nydame

dla mnie ustawienie szerokości i wysokości do 100% na wszystkich pomostów żylnych wystarczyły:

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

Czuje się dużo czystsze niż wyściółka wyściółki.

Źródło

2016-06-02 14:37:25 alexrogins

Ten pracował dla mnie:

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

Musisz ustawić max-height (w jednostkach vw) tak, że mieści się w granicach SVG. Wtedy wszędzie ładnie się skaluje. Zwróć uwagę, że maksymalna wysokość będzie różna dla różnych SVG, w zależności od proporcji.

Źródło

2018-03-09 11:12:20 peerless

Problem z wysokością okna podglądu SVG na ios Safari

Odpowiedz

Powiązane problemy