SVG między przeglądarkami w układzie responsywnym lub płynnym?

Question

Zdecydowałem się korzystać z biblioteki javascript Raphaël w celu zapewnienia jej rozbudowanej obsługi przeglądarki, ale mam problem z prawidłowym wyświetlaniem SVG w dowolnej przeglądarce, z wyjątkiem Chrome i Firefox. Od pewnego czasu nad tym zastanawiam się i chciałbym usłyszeć, jak mogę sprawić, by SVG działało w responsywnym układzie.

Chrome i Firefox wyświetlają SVG dokładnie tak, jakbym chciał. Równomiernie skaluje się, zachowuje prawidłowy współczynnik proporcji i procentową szerokość podaną przez rodzica.

Internet Explorer zachowuje prawidłowy współczynnik proporcji, ale nie skaluje się poprawnie wraz z rodzica.

Safari prawidłowo skaluje się z rodzicem na szerokość, ale nie na wysokości. Wysokość w stosunku do kontenera nadrzędnego jest w jakiś sposób ustawiona na 100%.

JavaScript

var menu = Raphael('menu', '100%', '100%'); 

menu.setViewBox('0', '0', '50', '50', true); 

var menu_bg = menu.rect(0,0, 50, 50); 
    menu_bg.attr({ 
     id : 'menu_bg', 
     'stroke-width' : '0', 
     'fill' : '#000' 
    }); 

CSS

* { 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html, body { 
    height: 100%; 
} 
#menu { 
    width: 50%; 
    background: #60F; 
    padding: 2.5%; 
} 
#menu svg { 
    display: block; 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
} 
#text { 
    width: 50%; 
    background: #309; 
    padding: 2.5%; 
    color: #FFF; 
} 

HTML

<div id="menu"></div> 

<div id="text"> 
Filler text 
</div> 

żywo Przykładem mogą być przeglądane na

• http://jsfiddle.net/R8Qv3/

Answer 1

Możesz dodać te właściwości tagu SVG - <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> zachować proporcje.

Zrobione z artykułu czytałem, że w ...

Aby zachować proporcje elementu zawierającego i upewnić się, że jest skala jednolity, my obejmują viewbox i preserveaspectratio atrybuty.

Wartość atrybutu viewbox jest listą czterech oddzielonych przecinkami liczb:: min-x, min-y, width i height. Definiując szerokość i wysokość naszego widoku, definiujemy współczynnik proporcji obrazu SVG . Wartości, które ustawiliśmy dla atrybutu preserveAspectRatio - 300 × 329 - zachowują współczynnik kształtu zdefiniowany w polu widoku.

Od this article.