svg背景图像的位置始终以Internet Explorer为中心，尽管背景位置：左中心;

我使用SVG徽标作为背景图像，我似乎无法在Internet Explorer （编辑：和Safari）中正确对齐左侧。svg背景图像的位置始终以Internet Explorer为中心，尽管背景位置：左中心;

容器看起来像这样：

<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。

来源

2013-07-30 bluefantail

什么版本的IE？ – koningdavid

你能举一个这种行为的一个活生生的例子吗？ –

在IE 10中得到这个问题，但也只是注意到它在Safari浏览器相同。 – bluefantail

125

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

来源

2014-09-14 21:02:15 Aeyoun

我从这个[https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio]中得到的是，不能用css＆必须完成背景位置设置在SVG本身。它是否正确？如果是这样，那只是血腥的不便。有没有办法解决？ –

编辑svg以获得适当的定位是一件痛苦的事，但一旦你知道小麦做什么，这不是一个主要问题。我发现这个极好的教程：http：//tutorials.jenkov.com/svg/svg-viewport-view-box.html –

好用catchAspectRatio！只是改变了这个最好的答案，欢呼。 – bluefantail

-3

原来以下行可以将您的SVG成非中心元素：

display: inline-block;

仍然不是最理想的解决方案，但它的工作原理。

来源

2014-10-24 16:02:27

一个元素的显示属性与它的背景属性无关。我希望看到让你相信的其他来源。 –

Habib的情况是，当他将容器的显示属性更改为内联块时，宽度从100％变为内容的宽度。所以如果容器很宽，现在已经变窄了，图像**可能看起来好像不再居中。然而，正如@CrystalMiller所指出的，事实并非如此。 –

-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-21 12:45:45 Rechtsamwald

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; 
}

的图像将仍然是140px内居中，但它将不再浮出超过这一点。

来源

2015-03-25 21:28:16 ppostma1

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

来源

2015-04-24 10:17:23

对我来说，宽度和高度都必须设置为像素值（不使用“自动”）。 –

同样解决了我的问题 –

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

在SVG中包含维度，以便它们与视图维度相同。

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

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

（因为它是可扩展的，它的定义“响应”，所以此设置似乎有点多余。）

来源

2016-03-20 23:46:20

我想出了相同的解决方案。此外，Chrome开始显示确切的大小。 –

svg背景图像的位置始终以Internet Explorer为中心，尽管背景位置：左中心;

回答

相关问题