带有 IE11 的 svg 上的 css 背景大小问题答案

【问题标题】：Issue with css background-size on svg with IE11带有 IE11 的 svg 上的 css 背景大小问题
【发布时间】：2019-08-15 21:46:54
【问题描述】：

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

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

样式在除 Internet Explorer 11 之外的所有其他浏览器中都能正常工作。我做了一些调查，结果是，我们应该在SVG 中添加height 和width。

我的问题：如果我们添加 height 和 width 属性，图像在所有其他浏览器和设备中是否仍可缩放和响应？谢谢！

【问题讨论】：

你试过stackoverflow.com/questions/22615336/…吗？
不，它应该有响应式的工作。
@tatranskymedved：我想知道，为什么这个问题被否决为“离题”？ CSS问题与编程无关吗！
非常详细的解释在sarasoueidan.com/blog/svg-coordinate-systems
@mayank 抱歉，我不是对这个问题投反对票的人。 IMO 为不必要的句子设置了反对票（例如“您已经猜到了............它是 IE 11”）。下次你应该避免这样的短语，直奔主题。

标签： css svg cross-browser

【解决方案1】：

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

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

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

【讨论】：

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

我认为这个属性在 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我不确定你是否真的需要那个。

【讨论】：

没有帮助，需要滚动
我很确定问题出在这些属性之一，尝试在 IE 上调试并从检查中一一删除属性。