浏览器之间HTML中的SVG缩放不一致

Question

我正在尝试在HTML中使用SVG，这是我不太熟悉的东西。它作为一个对象嵌入到html中。

SVG可以通过CSS进行扩展。当窗口处于完全大小（即足够大，SVG通过CSS达到其允许的最大宽度）时，它在Firefox、Chrome和Safari中看起来很正常。当浏览器窗口很小时，实际的SVG图像以及我认为它的容器在Firefox和Chrome中都会适当地缩小。然而，在Safari（桌面和iOS）中，SVG图像本身会缩小，但其"容器"保持在原始的最大高度。换句话说，在Safari中，实际图像的顶部和底部有太多空间，宽度很窄。

我目前有通过CSS分配的宽度，最大宽度和最大高度值。在所有浏览器中应用"auto"以外的高度值都会出现问题。我已经从SVG本身中删除了宽度和高度值，使其能够根据浏览器大小进行调整。

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

请查看此示例：http://jay-bee-why.com/demos/svg-scaling.html

要查看实际站点：http://twowordsfor.com（编辑：现已弃用）

以下是我在HTML:中嵌入SVG的方法

<div class="container">
       <object data="image.svg" type="image/svg+xml" id="logo">
             <img src="image.png">
       </object>
</div>

这是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文件的顶部：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 967 135" enable-background="new 0 0 967 135" xml:space="preserve">

Answer 1

这是现在的样子：

.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;}

<div class="container">
       <object data="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg" type="image/svg+xml" id="logo">
       </object>
</div>