78

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).

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.

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.

4

8 回答 8

157

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

在您的元素上设置一个viewBox="0 0 width height"（以像素为单位）属性<svg>并删除其width和height属性。您还需要preserveAspectRatio="xMinYMid"在元素上设置 (x/vertically left-aligned, y/horizo​​ntally middle-aligned) svg 。这至少适用于 Internet Explorer 10 和 11。

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

了解有关preserveAspectRatio和viewBox属性的更多信息。来源，IEblog 中的“SVG 入门”。

于 2014-09-14T21:02:15.067 回答
18

在我的情况下，添加“宽度”和“高度”值解决了 ie9-11 上的问题。

于 2015-04-24T10:17:23.993 回答
16

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

下面是示例代码

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}
于 2018-05-09T06:34:07.623 回答
16

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

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

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

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

（由于它是可扩展的，它的定义是“响应式的”。所以这个设置似乎有点多余。）

于 2016-03-20T23:46:20.487 回答
6

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 像素内居中，但不会再超出该点。

于 2015-03-25T21:28:16.053 回答
3

在我的情况下，下面的属性有效

preserveAspectRatio="xMinYMin"

于 2019-10-29T03:53:30.253 回答
-2

解决方案：尝试另一个.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">
于 2014-11-21T12:45:45.843 回答
-4

事实证明，以下行可以将您的 svg 变成非居中元素：

display: inline-block;

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

于 2014-10-24T16:02:27.893 回答