一尘不染

svg背景图片的位置始终在Internet Explorer中居中,尽管背景位置为:左居中;

css

我正在使用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中这可以正常工作,但徽标始终<div id="logo">位于IE中的居中位置。

似乎很难找到信息,其他人也遇到同样的问题吗?


阅读 361

收藏
2020-05-16

共1个答案

一尘不染

问题不在于CSS,而在于SVG。SVG将增长以填充整个元素框的背景(如预期的那样)。SVG规模如何成为控制因素:

viewBox="0 0 widthheight"<svg>元素上设置(以像素为单位)属性,然后删除其widthheight属性。您还需要preserveAspectRatio="xMinYMid"svg元素上设置(x /垂直左对齐,y /水平中间对齐)。至少与Internet Explorer 10和11兼容。

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>
2020-05-16