JavaScript – 跨浏览器SVG在响应或流畅的布局？

我选择使用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>

实例可以查看

> http://jsfiddle.net/R8Qv3/

解决方法

您可以将这些属性添加到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.

从this article.