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 中与左侧正确对齐(和 Safari).

容器看起来像这样:

<div id="logo"></div>

样式:

#header{宽度:100%；最大宽度:1200px；高度:100%；}#标识{背景:网址(../images/ss_logo.svg)；背景位置:左居中；宽度:100%；高度:100%；向左飘浮;}

您可以看到

应该跨越其父元素的 100%，但在元素的左侧显示徽标.这在 Chrome 和 Safari 中运行良好，但徽标始终位于 IE 中的 <div id="logo"> 内.

这方面的信息好像真的很难找到，有没有其他人遇到过同样的问题?

这是一个指向问题示例版本的链接，绿色框是SVG.

解决方案

问题不在于您的 CSS，而在于您的 SVG.SVG 将增长以填充整个元素框的背景(如预期).然后你的 SVG 比例如何成为控制因素:

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

详细了解 preserveAspectRatio 和 viewBox 属性.来源，入门SVG"在 IEblog 中.

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.

解决方案

The problem is not with your CSS but with your SVG. The SVG will grow to fill the entire element box’s background (as expected). How your SVG scale then becomes the controlling factor:

Set a viewBox="0 0 width height" (in pixels) attribute on your <svg> element and remove its width and height attributes. You also need to set preserveAspectRatio="xMinYMid" (x/vertically left-aligned, y/horizontally middle-aligned) on the svg element. This works with Internet Explorer 10 and 11, at least.

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

Learn more about the preserveAspectRatio and viewBox attributes. Source, "Getting started with SVG" in the IEblog.

这篇关于svg 背景图像位置始终在 Internet Explorer 中居中，尽管 background-position: left center;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！