Przeglądarka krzyżowa SVG preserveAspectRatio

Question

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.

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?

Answer 1

Wygląda znalazłem rozwiązanie:

Trzeba zachować width i height właściwości w SVG.

<svg 
    width="580" 
    height="220" 
    viewBox="0 0 580 220" 
    preserveAspectRatio="xMidYMid meet" 
>...</svg> 

I aby to działało na IE 9 trzeba określić co najmniej jeden wymiar znacznika <img />.

<img src="your.svg" style="width: 100%" /> 

Wydaje się, że działa wszędzie.

Answer 2

że rozwiązany przy pomocy następujących CSS do:

Szerokość: 100%; maksymalna szerokość: (pożądana szerokość w pikselach)

Answer 3

Pomyślałem, że dodam, w jaki sposób wkroczyłem w rozwiązanie. Na początku miałem problemy z ustaleniem niektórych problemów.

1. Edytuj swój plik SVG, aby usunąć zakodowane na sztywno atrybuty wysokości i szerokości. (z prostym edytorem tekstu)
2. Zastosuj szerokość: 100% css na obraz svg, aby program IE wyświetlał go tak, jak inne przeglądarki. (tak duży jak jego pojemnik)
3. Użyj css na swoim pojemniku obrazu, aby uzyskać spójne wyniki!

Zrobiłem stronę do opisywania go bardziej szczegółowo w http://ivantown.com/posts/svg-scaling-with-ie/

Answer 4

Rozwiązaniem w moim przypadku używała odpowiedź Peter Hudec, ale z powodu korzystania width: 100%; na metce <img />, który wybuchł układ na każdym przeglądarka inna niż IE9, dodałem hak CSS IE9 (width: 100%\9\0;). Mam nadzieję, że ten dodatek pomoże komuś. :-)

Nawet przy użyciu preserveAspectRatio="xMidYMid meet" nie było konieczne.

(Chciałem tylko dodać komentarz, a nie odpowiedzieć, ale jeszcze nie reputacja to zrobić :-)