SVG cross-browser in layout reattivo o fluido?

Question

Ho optato per utilizzare la libreria javascript Raphaël per l'ampio supporto del browser, ma ho difficoltà a visualizzare correttamente SVG in qualsiasi browser, ad eccezione di Chrome e Firefox. Mi sono grattato la testa per un po 'ora e mi piacerebbe sapere come posso far funzionare SVG in un layout reattivo.

Chrome e Firefox visualizzare l'SVG esattamente come mi piacerebbe. Scala in modo uniforme, mantiene un rapporto proporzioni corretto e la larghezza indicata dalla percentuale del genitore.

Internet Explorer mantiene un rapporto aspetto corretto, ma non viene ridimensionato correttamente con il relativo genitore.

Il Safari si adatta correttamente con il genitore in larghezza, ma non in altezza. L'altezza, in relazione al contenitore genitore, è in qualche modo impostata al 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> 

dal vivo ad esempio può essere visionato a

• http://jsfiddle.net/R8Qv3/

Answer 1

È possibile aggiungere queste proprietà per il tag SVG - <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> per preservare le proporzioni.

Tratto da articolo ho letto che ...

Per mantenere le proporzioni dell'elemento di contenimento e assicurare che è uniformemente scale, includiamo il viewBox e preserveAspectRatio attributi.

Il valore dell'attributo viewbox è un elenco di quattro numeri separati da virgola o : min-x, min-y, larghezza e altezza. Definendo la larghezza e l'altezza della nostra viewbox, definiamo le proporzioni dell'immagine SVG . I valori impostati per l'attributo preserveAspectRatio - 300 × 329 - mantengono le proporzioni definite nella casella di visualizzazione.

Da this article.