Svg 背景图像位置总是以 Internet Explorer 为中心，尽管背景位置是左中心;

我使用了一个 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 中，logo 总是居中在 <div id="logo">中。

这方面的信息似乎真的很难找到，是否有其他人也有同样的问题？

这里有一个到 问题的示例版本的链接，绿色的框是 SVG。

61269 次浏览
小开
最佳答案

问题不在于 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和 视窗属性的更多信息。

小开

原来下面这行代码可以将 svg 转换为非居中元素:

display: inline-block;

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

小开

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

IE 8-11，当在背景中放置一个无重复的 SVG 时，自动均匀地摆动左右边以适应它的大小。这在图像级别创建了图像的居中效果。意义: 它扩展了图像两侧的空白区域来填充容器。

新图像的宽度是其元素的100% 。这就是为什么位置: 左边没有效果，它已经留下填充包括。

必须约束背景元素的容器，以防止过度扩展(通过闪烁)。例如: max-width

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

图像仍然会以140px 为中心，但是它不会再漂浮在那个点之外。

小开

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

小开

公认的答案有效，但还有另一个解决方案。

在 SVG 中包含维度，这样它们就与视图框的维度相同了，这也是一个诀窍。

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

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

(因为它是可伸缩的，所以按照定义它是“响应的”。所以这个设置看起来有点多余。)

小开

如果我们给出背景大小，它将在 IE 中工作

下面是示例代码

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

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

preserveAspectRatio="xMinYMin"


提交答案