Html svg 背景图像位置总是在 Internet Explorer 中居中，尽管 background-position: left center;
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17944354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
svg background image position is always centered in internet explorer, despite background-position: left center;
提问by bluefantail
I'm using a SVG logo as a background image and I can't seem to get it to align correctly to the left in Internet Explorer (edit: and Safari).
我正在使用 SVG 徽标作为背景图像，但似乎无法使其在 Internet Explorer (edit: and Safari) 中正确对齐到左侧。
The containers look like so:
容器看起来像这样：
<div id="header">
<div id="logo"></div>
</div>
With the styles:
与样式：
#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;}
You can see that the <div>should span 100% of its parent but display the logo to the left of the element. This works fine in Chrome and Safari, but the logo is always centered inside the <div id="logo">in IE.
您可以看到<div>应该跨越其父元素的 100%，但在元素的左侧显示徽标。这在 Chrome 和 Safari 中工作正常，但徽标始终<div id="logo">在 IE 中居中。
Information seems to be really hard to find on this, has anyone else had the same problem?
这方面的信息似乎真的很难找到，有没有其他人遇到过同样的问题？
Here's a link to an example version of the problem, the green box is the SVG.
这是问题示例版本的链接，绿色框是 SVG。
回答by Aeyoun
The problem is not with your CSS but with your SVG. The SVG will grow to fill the entire element box's background (as expected). How your SVG scale then becomes the controlling factor:
问题不在于您的 CSS，而在于您的 SVG。SVG 将增长以填充整个元素框的背景（如预期）。然后你的 SVG 缩放如何成为控制因素：
Set a viewBox="0 0 width height"(in pixels) attribute on your <svg>element and remove its widthand heightattributes. You also need to set preserveAspectRatio="xMinYMid"(x/vertically left-aligned, y/horizontally middle-aligned) on the svgelement. This works with Internet Explorer 10 and 11, at least.
viewBox="0 0 width height"在<svg>元素上设置（以像素为单位）属性并删除其width和height属性。您还需要preserveAspectRatio="xMinYMid"在svg元素上设置(x/vertically left-aligned, y/horizontally middle-aligned) 。这至少适用于 Internet Explorer 10 和 11。
<svg viewbox="0 0 64 64"
preserveAspectRatio="xMinYMid">
… </svg>
Learn more about the preserveAspectRatioand viewBoxattributes. Source, “Getting started with SVG” in the IEblog.
了解有关preserveAspectRatio和viewBox属性的更多信息。来源，IEblog 中的“SVG 入门”。
回答by Marcus Mori Morba
In my case adding "width" & "height"-values solved the problems on ie9-11.
就我而言，添加“宽度”和“高度”值解决了 ie9-11 上的问题。
回答by Dennis Best
The accepted answer works, but here's another solution.
接受的答案有效，但这是另一种解决方案。
Including the dimensions in the SVG so they are identical to the viewbox dimensions also does the trick.
在 SVG 中包含尺寸，使它们与视图框尺寸相同也可以解决问题。
width="496px" height="146px" viewBox="0 0 496 146"
If you're like me and you edit/save your SVG's in Illustrator, untick the "responsive" checkbox in Advanced Options in the save dialog. Then the dimensions will be included.
如果您像我一样在 Illustrator 中编辑/保存 SVG，请取消选中保存对话框中高级选项中的“响应式”复选框。然后将包括尺寸。
(Since it's scalable, it's 'responsive' by definition. So this setting seems a bit redundant.)
（因为它是可扩展的，所以根据定义它是“响应式”的。所以这个设置似乎有点多余。）
回答by Thomas Mathew
If we give the background size, it will work in IE
如果我们给出背景大小，它将在 IE 中工作
below is the sample code
下面是示例代码
.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}
回答by ppostma1
IE 8-11, when placing an SVG in a background with no-repeat, automatically even-shims the left and right side to scale it to fit. That creates a centering effect of the image, at the image level. Meaning: It expands white space on both sides of the image to fill up the container.
IE 8-11，当将 SVG 放置在无重复的背景中时，会自动调整左右两侧以缩放以适应。这会在图像级别创建图像的居中效果。含义：它扩展图像两侧的空白以填充容器。
The new image is then 100% the width of its element. This is why position:left has no effect, it is already left with padding included.
新图像是其元素宽度的 100%。这就是为什么 position:left 没有效果，它已经包含了填充。
The container of the background element must be constrained to prevent over expanding (via shimming). For instance: max-width
必须限制背景元素的容器以防止过度扩展（通过填充）。例如：最大宽度
div#logo{
background-image: url(/img/logo.svg) no-repeat;
max-width: 140px;
margin: 0 auto auto 0;
}
The image will still be centered within the 140px, but it will no longer float out beyond that point.
图像仍将在 140 像素范围内居中，但不会再超出该点。
回答by Tal
In my case the attribute below worked
在我的情况下，下面的属性有效
preserveAspectRatio="xMinYMin"
preserveAspectRatio="xMinYMin"
回答by Rechtsamwald
Solution: try another .svg, here some sample head:
解决方案：尝试另一个 .svg，这里有一些示例头：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.5, 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="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="82px" viewBox="0.5 1000.5 500 82" enable-background="new 0.5 1000.5 500 82" xml:space="preserve">
回答by Habib Khan
It turns out the following line can turn your svg into a non-centered element:
事实证明，以下行可以将您的 svg 变成非居中元素：
display: inline-block;
Still not the most ideal solution but it works.
仍然不是最理想的解决方案，但它有效。
