svg背景图片在浏览器中的位置总是居中，尽管背景位置是左居中；
我使用SVG徽标作为背景图像，但在Internet Explorer (edit:和Safari)中似乎无法使其正确地与左侧对齐。
容器看起来像这样：
<div id="header">
<div id="logo"></div>
</div>使用以下样式：
#header{
width: 100%;
max-width: 1200px;
height: 100%;}
#logo{
background: url(../images/ss_logo.svg);
background-position: left center;
width: 100%;
height: 100%;
float: left;}您可以看到，<div>应该跨越其父元素的100%，但是会在元素的左侧显示徽标。这在Chrome和Safari中工作得很好，但在IE中，徽标总是在<div id="logo">内部居中。
这方面的信息似乎真的很难找到，其他人有过同样的问题吗？
这是一个example version of the problem的链接，绿色的方框是SVG。
回答 8
Stack Overflow用户
发布于 2014-09-15 05:02:15
问题不在于你的CSS，而在于你的SVG。SVG将增长以填充整个元素框的背景(正如预期的那样)。您的SVG规模如何成为控制因素：
在<svg>元素上设置viewBox="0 0 width height" (以像素为单位)属性，并删除其width和height属性。您还需要在svg元素上设置preserveAspectRatio="xMinYMid" (x/垂直左对齐，y/水平中对齐)。这至少适用于Internet Explorer 10和11。
<svg viewbox="0 0 64 64"
preserveAspectRatio="xMinYMid">
… </svg>了解有关preserveAspectRatio和viewBox属性的更多信息。来源：“Getting started with SVG” in the IEblog。
Stack Overflow用户
发布于 2015-04-24 18:17:24
在我的例子中，添加"width“和"height"-values解决了ie9-11上的问题。
Stack Overflow用户
发布于 2016-03-21 07:46:20
公认的答案是可行的，但这里有另一个解决方案。
在SVG中包含尺寸，以便它们与viewbox尺寸相同，也可以做到这一点。
width="496px" height="146px" viewBox="0 0 496 146" 如果您和我一样，并且在Illustrator中编辑/保存SVG，请在保存对话框的高级选项中取消勾选“响应”复选框。然后，尺寸将被包括在内。
(因为它是可伸缩的，所以根据定义它是“响应式”的。所以这个设置看起来有点多余。)
https://stackoverflow.com/questions/17944354
复制相似问题
腾讯云开发者
