javascript - 响应式或流畅布局的跨浏览器 SVG？

Question

我选择使用 Raphaël javascript 库以获得广泛的浏览器支持，但我无法让 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">以保持纵横比。

摘 self 在...中读到的文章

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 .