跨浏览器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">以保留纵横比。

\n\n

摘自我读过的文章...

\n\n

\n

为了保留包含元素的纵横比并确保均匀缩放，我们包含 viewbox 和preserveAspectRatio 属性。

\n\n

viewbox 属性的值是四个空格或逗号分隔的数字的列表：min-x、min-y、宽度和高度。通过定义视图框的宽度和高度，我们定义了 SVG 图像的纵横比。我们为preserveAspectRatio属性设置的值 \xe2\x80\x94\n 300 \xc3\x97 329 \xe2\x80\x94 保留视图框中定义的宽高比。

\n

\n\n

从这篇文章来看。

\n