Question

我正在使用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。

Answer 1

问题不在于您的CSS，而在于您的SVG。 SVG将增长以填充整个元素框的背景（如预期的那样）。你的SVG规模如何成为控制因素：

在viewBox="0 0 width height"元素上设置<svg>（以像素为单位）属性，并删除其width和height属性。您还需要在preserveAspectRatio="xMinYMid"元素上设置svg（x /垂直左对齐，y /水平中间对齐）。这适用于Internet Explorer 10和11，至少。

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

详细了解preserveAspectRatio和viewBox属性。来源，“Getting started with SVG” in the IEblog。

Answer 2

在我的情况下添加“width”＆amp; “高度”值解决了ie9-11的问题。

Answer 3

接受的答案可以解决问题，但这是另一种解决方案。

在SVG中包含尺寸，使它们与视图框尺寸相同就可以了。

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

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

（因为它的可扩展性，根据定义它是'响应'。所以这个设置似乎有点多余。）

Answer 4

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

下面是示例代码

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

Answer 5

IE 8-11，将SVG放置在无重复的背景中时，会自动均匀地对左侧和右侧进行调整以使其适合缩放。这在图像级别创建了图像的居中效果。含义：它会扩展图像两侧的空白区域以填充容器。

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

必须约束背景元素的容器以防止过度扩展（通过匀场）。例如：max-width

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

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

Answer 6

在我的情况下，以下属性对我有用

reserveAspectRatio="xMinYMin"

Answer 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">

Answer 8

事实证明，以下行可以将您的svg转换为非居中元素：

display: inline-block;

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

svg背景图像位置始终在Internet Explorer中居中，尽管背景位置：左中心;

8 个答案: