10

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

可以在以下位置查看实时示例

SVG在浏览器中的显示差异

4

1 回答 1

4

您可以将这些属性添加到您的 SVG 标记中 -<svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">以保持纵横比。

摘自我在...中读到的文章

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

viewbox 属性的值是一个由四个空格或逗号分隔的数字组成的列表：min-x、min-y、width 和 height。通过定义我们的视图框的宽度和高度，我们定义了 SVG 图像的纵横比。我们为 preserveAspectRatio 属性设置的值 — 300 × 329 — 保留了 viewbox 中定义的纵横比。

从这篇文章。

于 2013-06-07T12:16:24.083 回答