svg背景图像位置总是在互联网浏览器中心，尽管background-position：left center; [英] svg background image position is always centered in internet explorer, despite background-position: left center;

问题描述

Im使用svg作为徽标的背景图片，似乎无法使其在Internet Explorer中正确对齐（编辑：和safari）。
容器看起来像这样：

Im using an svg as a background image for a logo, and cant 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>

使用样式：

#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中工作得很好，但总是在#logo div中居中。
信息似乎很难找到，有其他人有同样的问题吗？

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 always is centered inside the #logo div in ie. Information seems to be really hard to find on this, has anyone else had the same problem?

它链接到一个示例版本的问题，绿色框是svg http://magma.acidic.co.nz/sites/example

Heres a link to an example version of the problem, the green box is the svg http://magma.acidic.co.nz/sites/example

推荐答案

问题不是你的CSS，而是你的SVG。 SVG将增长以填充整个元素框的背景（如预期）。您的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:

设置 viewBox =0 0 width height元素并移除其宽度和高度 code>属性。您还需要在 svg preserveAspectRatio =xMinYMid（x /垂直左对齐，y /水平中间对齐） c $ c>元素。这至少适用于Internet Explorer 10和11.

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>

详细了解 preserveAspectRatio 和 viewBox 属性。来源，开始使用SVGin the IEblog 。

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

这篇关于svg背景图像位置总是在互联网浏览器中心，尽管background-position：left center;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！