Pojemnik SVG renderuje nieprawidłowy rozmiar na pulpicie Safari (w porządku w Chrome/iOS)

Question

Myślałem, że Safari to posortował, ale nadal wydaje się być problemem (chyba że robię coś oczywiście nie tak).

Mam SVG umieszczony wewnątrz znacznika obiektu. To jest owinięte w elastyczny zawierający DIV (np. Ustawiony na szerokość 50%). Podczas zmiany rozmiaru wysokość kontenera zmienia się w przeglądarce Firefox, Chrome i Opera, jak można się było spodziewać, ale w przypadku Safari pojemnik pozostaje zbyt wysoki.

Oto przykład na Codepen wykazać, przełącznik do pełnego wyniku size lub „edytor na stronie” (przycisk u dołu po prawej), aby zobaczyć efekt wyraźnie w Safari: http://codepen.io/benfrain/full/fhyrD

Poza tym przy użyciu JS, aby zmienić rozmiar SVG na załadować/zmienić rozmiar, czy ktoś wie, czy jest coś, co mogę zrobić, aby Safari zachowywało się poprawnie? Mógłbym przysiąc, że wymyśliłem to kilka tygodni temu, ale teraz wydaje mi się, że znowu uderzam w tę kwestię.

Answer 1

Tak, Sérgio Lopez miał na to odpowiedź. Możesz użyć współczynnika wewnętrznego dla techniki wideo, którą Thierry Koblentz opisał tutaj: http://alistapart.com/article/creating-intrinsic-ratios-for-video. Więcej informacji w tym blogu: http://benfra.in/20l

Oto wycinania i wklejania kodu trzeba w CSS:

tag Otoczenie obiektu

object { 
    width: 100%; 
    display: block; 
    height: auto; 
    position: relative; 
    padding-top: 100%; 
} 

A to dla SVG Wewnątrz:

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