Cross-Browser-SVG in responsiven oder flüssigen Layout?

Question

Ich habe mich für die umfassende Browser-Unterstützung für die Javascript-Bibliothek von Raphaël entschieden, aber ich habe Probleme, die SVG in jedem Browser mit Ausnahme von Chrome und Firefox ordnungsgemäß anzuzeigen. Ich kratze mich seit einiger Zeit über diesen Kopf und würde gerne hören, wie ich SVG in einem ansprechenden Layout arbeiten lassen könnte.

Chrome und Firefox Anzeige der SVG genau so, wie Ich mag würde. Es skaliert gleichmäßig, behält ein korrektes Seitenverhältnis und die prozentuale Breite des Elternteils bei.

Internet Explorer behält ein korrektes Seitenverhältnis bei, skaliert jedoch nicht ordnungsgemäß mit dem übergeordneten Element.

Safari skaliert ordnungsgemäß mit seiner übergeordneten Breite, aber nicht in der Höhe. Die Höhe, bezogen auf den übergeordneten Container, ist auf 100% gesetzt.

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> 

Live- Beispiel kann bei

• http://jsfiddle.net/R8Qv3/

Answer 1

Sie können diese Eigenschaften zu Ihrem SVG-Tag hinzufügen angesehen werden - <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> Seitenverhältnis beizubehalten.

aus dem Artikel Genommen ich gelesen, dass in ...

Um das Seitenverhältnis des enthaltenden Elements zu erhalten und sicherzustellen, dass Skalen gleichmäßig sind, sind wir das Sichtgerät und preserveAspectRatio Attribute.

Der Wert des Viewbox-Attributs ist eine Liste von vier Leerzeichen- oder durch Kommas getrennte Zahlen: Min-X, Min-Y, Breite und Höhe. Indem wir die Breite und Höhe unserer Viewbox definieren, definieren wir das Seitenverhältnis des SVG-Bildes. Die Werte, die wir für das Attribut preserveAspectRatio festlegen - 300 × 329 - behalten das in viewbox definierte Seitenverhältnis bei.

Von this article.