javascript - レスポンシブまたは流動的なレイアウトのクロスブラウザー SVG?

Question

私は Raphaël の javascript ライブラリを使用してブラウザーを幅広くサポートすることにしましたが、Chrome と Firefox を除くどのブラウザーでも SVG を適切に表示するのに問題があります。私はこれについてしばらく頭を悩ませていましたが、レスポンシブ レイアウトで 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/