Próbuję mieć grafikę SVG wewnątrz znacznika <img />
, która zmieści się (bez przycinania) wewnątrz znacznika z zachowanym współczynnikiem proporcji. Stworzyłem SVG w Inkscape. Wszystko działało zgodnie z oczekiwaniami we wszystkich przeglądarkach z wyjątkiem Internet Explorer 9.Przeglądarka krzyżowa SVG preserveAspectRatio
Aby działać na IE 9 musiałem dodać viewBox="0 0 580 220"
i preserveAspectRatio="xMidYMid meet"
i wyjąć SVG width="580"
i height="220"
właściwości.
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
Wydawało pracować wszędzie, tylko dopóki nie próbowałem go na Webkit, gdzie tag <img />
zostaje rozciągnięty w pionie, chociaż proporcje SVG rzeczywiście jest zachowana.
Kiedy kładę z powrotem width="580"
i height="220"
właściwości, działa na Webkit ale na IE 9 stosunek aspectr jest stracone.
Czy istnieje rozwiązanie oparte na przeglądarce dla tego zachowania?
miałem ten problem za pomocą "max-width: 100%" w IE10 na Windows Phone 8 Uczynienie go także "szerokością: 100%". Dzięki stary. –
To działało cuda !! Wielkie dzięki –
W rzeczywistości po ustawieniu szerokości elementu nie trzeba już ustawiać szerokości i wysokości w SVG. – gzost