跨瀏覽器SVG在響應或流暢的布局？

Question

我選擇使用Raphaëljavascript庫來獲得廣泛的瀏覽器支持，但是我無法在任何瀏覽器中正常顯示SVG，Chrome和Firefox除外。 我一直在摸不着頭腦，我很想聽聽如何讓SVG在響應式布局中工作。

Chrome和Firefox完全按照我的意願顯示SVG。 它均勻地縮放，保持正確的寬高比及其父級給定寬度的百分比。

Internet Explorer保持正確的寬高比，但不能與其父級正確縮放。

Safari的父級寬度適當縮放，但高度不合適。 相對於父容器的高度以某種方式設置為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> 

可以查看實例

• http://jsfiddle.net/R8Qv3/

Answer 1

您可以將這些屬性添加到SVG標記 - <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">以保留縱橫比。

從文章中我讀到...

為了保持包含元素的寬高比並確保統一縮放，我們包括viewbox和preserveAspectRatio屬性。

viewbox屬性的值是由四個空格或逗號分隔的數字組成的列表：min-x，min-y，width和height。 通過定義視圖框的寬度和高度，我們定義了SVG圖像的寬高比。 我們為preserveAspectRatio屬性設置的值 - 300×329 - 保留了viewbox中定義的寬高比。

從這篇文章 。