Question

我有一个带有CSS的SVG图像，如下所示：

background: url("/assets/img/image1.svg") no-repeat center top scroll;
background-size: 100% auto

在 Internet Explorer 11 以外的所有其他浏览器中，样式都可以正常工作。我进行了一些调查，最终得出结论，我们应该在height中添加width和SVG。

我的问题：如果我们添加这些height和width属性，该图像在所有其他浏览器和设备上是否仍可扩展且响应迅速？谢谢！

Answer 1

我认为此属性会在IE中破坏它 background: url("/assets/img/image1.svg") no-repeat center top scroll; 尝试像这样分别放置属性：

background-image: url('/assets/img/image1.svg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
background-size: 100% auto;

ps。 background-attachment: scroll我不确定您是否真的需要。

Answer 2

“如果添加这些高度和宽度属性，图像在所有其他浏览器和设备上是否仍可缩放并响应？”

是的！图像将根据您提供的CSS进行缩放。如果查看我使用https://s.cdpn.io/3/kiwi.svg的SVG的来源，您会看到width="612px"和height="502.174px"，但设置了background-size: 100% auto;时，您会看到SVG是元素的宽度相同（50px），高度为动态（或自动）。

div {
    height:100px;
    width:50px;
    
    
    /* the only change below is the url source */
    background: url("https://s.cdpn.io/3/kiwi.svg") no-repeat center top scroll; 
    background-size: 100% auto;
}

<div></div>

Answer 3

根据 MDN https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio，您应该使用 preserveAspectRatio 属性并将其设置为 none。

<svg preserveAspectRatio="none" viewBox="0 0 20 20" width="20px" height="20px">...</svg>

注意：如果 viewBox 属性不存在，这将不起作用

带有IE11的SVG上的CSS背景大小问题

3 个答案: