svg 背景图像位置始终在 Internet Explorer 中居中，尽管 background-position: left center;答案

【问题标题】：svg background image position is always centered in internet explorer, despite background-position: left center;svg 背景图像位置始终在 Internet Explorer 中居中，尽管 background-position: left center;
【发布时间】：2013-07-30 10:36:53
【问题描述】：

我使用 SVG 徽标作为背景图片，但在 Internet Explorer （编辑：和 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。

【问题讨论】：

你能链接一个这种行为的实例吗？
在 IE 10 中遇到了这个问题，但在 safari 中也发现了同样的问题。
magma.acidic.co.nz/sites/example
添加 background-size: 对我有用。
CSS background-size 也适用于我，但与 Chrome/FF/Safari 不同，IE 无法处理单个值来暗示自动高度保留纵横比。例如，要渲染 13x13 像素的方形 SVG，请使用 background-size: 13px 13px 而不是 background-size: 13px。

标签： html css svg

【解决方案1】：

问题不在于您的 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。

【讨论】：

我从中得到的 [developer.mozilla.org/en-US/docs/Web/SVG/Attribute/… 是无法使用 css 设置背景位置，而这必须在 SVG 本身中完成。它是否正确？如果是这样，那简直太不方便了。反正有这个吗？
必须编辑 svg 以获得正确的定位有点痛苦，但是一旦你知道小麦可以做什么，这不是一个大问题。我在上面找到了这个极好的教程：tutorials.jenkov.com/svg/svg-viewport-view-box.html
谢谢！就我而言，我需要 xMinYMin。但恰到好处！
如果您像我一样从 Illustrator 编辑并保存 SVG，请取消选中保存对话框中高级选项中的“响应式”复选框。
精彩的答案真的很感激！对我来说，viewbox 已经设置好了，但是 preserveAspectRatio 修复了它。

【解决方案2】：

在我的例子中，添加“宽度”和“高度”值解决了 ie9-11 上的问题。

【讨论】：

对我来说，宽度和高度都必须设置为像素值（不使用“自动”）。
同样解决了我的问题

【解决方案3】：

如果我们给背景尺寸，它可以在 IE 中工作

下面是示例代码

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}

【讨论】：

这对我有用。在我的情况下，添加固定的背景大小（不使用自动）。

【解决方案4】：

接受的答案有效，但这是另一种解决方案。

在 SVG 中包含尺寸以便它们与视图框尺寸相同也可以解决问题。

width="496px" height="146px" viewBox="0 0 496 146"

如果您像我一样在 Illustrator 中编辑/保存 SVG，请取消选中保存对话框中高级选项中的“响应式”复选框。然后将包含尺寸。

（因为它是可扩展的，所以从定义上来说它是“响应式”的。所以这个设置似乎有点多余。）

【讨论】：

我想出了相同的解决方案。 chrome 也开始显示确切的大小。

【解决方案5】：

IE 8-11，当将 SVG 放置在不重复的背景中时，会自动对左侧和右侧进行均匀填充以适应缩放。这会在图像级别创建图像的居中效果。含义：扩大图像两侧的空白以填满容器。

然后，新图像是其元素宽度的 100%。这就是为什么 position:left 没有效果，它已经包含了填充。

必须限制背景元素的容器以防止过度扩展（通过填充）。例如：最大宽度

div#logo{
    background-image: url(/img/logo.svg) no-repeat;
    max-width: 140px;
    margin: 0 auto auto 0;
}

图像仍将在 140 像素内居中，但不会再超出该点。

【讨论】：

【解决方案6】：

在我的例子中，下面的属性起作用了

preserveAspectRatio="xMinYMin"

【讨论】：

【解决方案7】：

解决方案：尝试另一个 .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">

【讨论】：

【解决方案8】：

原来下面这行可以把你的 svg 变成一个非居中的元素：

display: inline-block;

仍然不是最理想的解决方案，但它确实有效。

【讨论】：

元素的显示属性与它的背景属性无关。我想看看让你相信的消息来源。
Habib 的情况是，当他将容器的 display 属性更改为 inline-block 时，宽度从 100% 变为内容的宽度。因此，如果容器非常宽，现在变窄，则图像可能看起来好像不再居中。然而，正如@CrystalMiller 指出的那样，事实并非如此。