svg在html里按比例缩小,浏览器之间的HTML中的SVG缩放不一致

我正在尝试在HTML中使用SVG，这一点我不太熟悉。它作为一个对象嵌入在html中。浏览器之间的HTML中的SVG缩放不一致

SVG可通过CSS进行扩展。当窗口处于全尺寸状态(即足够大以至于SVG达到CSS的最大允许宽度时)，在Firefox，Chrome和Safari中看起来很正常。当浏览器窗口很小时，实际的SVG图像以及我认为它的容器在Firefox和Chrome中适当缩小。但是，在Safari(桌面和iOS)中，SVG图像本身会缩小，但其“容器”保持原来的最大高度。换句话说，Safari中实际图像的顶部和底部的宽度太窄，而且宽度太窄。

我目前有通过CSS分配的宽度，最大宽度和最大高度值。应用“自动”以外的高度值会给所有浏览器带来问题。我已经从SVG中移除了宽度和高度值，使其适应浏览器大小。

我想知道如何让Safari以与Firefox和Chrome相同的方式缩放SVG图像。 感谢您提供任何输入！

这里是我是如何嵌入在HTML中的SVG：

这是CSS：

.container {width:99.8%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}

#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}

这是SVG文件的顶部：

viewBox="0 0 967 135" enable-background="new 0 0 967 135" xml:space="preserve">

+0

http://stackoverflow.com/questions/16578484 /如何-可以-I-显示-AN-SVG-图像中之一个对象标签的在-A-不同尺度 –

2014-06-20 11:12:41