我选择使用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',true);
var menu_bg = menu.rect(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>
实例可以查看
解决方法
您可以将这些属性添加到SVG标签中 – < svg viewBox =“0 0 300 329”preserveAspectRatio =“xMidYMid meet”>以保持长宽比.
从文章中我读到…
To preserve the aspect ratio of the containing element and ensure that
is scales uniformly,we include the viewBox and preserveAspectRatio
attributes.The value of the viewBox attribute is a list of four space- or
comma-separated numbers: min-x,min-y,width and height. By defining
the width and height of our viewBox,we define the aspect ratio of the
SVG image. The values we set for the preserveAspectRatio attribute —
300 × 329 — preserve the aspect ratio defined in viewBox.
