100％内联svg宽度在IE11中不起作用[重复]答案

【问题标题】：100% inline svg width not working in IE11 [duplicate]100％内联svg宽度在IE11中不起作用[重复]
【发布时间】：2018-04-26 05:45:28
【问题描述】：

我有一个基本的内联 svg 设置

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.51 25.51">
    <rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
</svg>

JSFIDDLE

在任何浏览器中，svg 都会占据整个宽度，IE11 除外。 CSS看起来像

svg {
    stroke: #000;
    stroke-width: 2px;
}

svg rect {
    fill: red;
}

我尝试将 width: 100% 和 display: block 添加到 svg 中，但这并没有帮助。有什么建议可以在 IE11 中使 svg 的宽度达到 100%？

【问题讨论】：

你试过width: inherit, max-width: 100%在stackoverflow.com/questions/8610077/…提议的吗？
我已经添加了css属性DEMO但结果还是一样
使用链接复制解决方案的示例解决方法：jsfiddle.net/ahsnurwf/13
检查，画布修复了 IE11 中的问题 :)

标签： svg internet-explorer-11

【解决方案1】：

默认为preserveAspectRatio = "xMinYMin meet"属性

设置该属性的值none

svg {
    stroke: #000;
    stroke-width: 2px;
}

svg rect {
    fill: red;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" preserveAspectRatio = "none">
    <rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
</svg>

现在 svg 在 IE11 中的宽度是 100%。

但是不遵守比例，并且根据浏览器窗口的比例将正方形拉伸为矩形。要拥有一个矩形，您需要设置视口 SVG，例如：

width="900" height="900"

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900" viewBox="0 0 30 30" >
    <rect id="a1" x="0.5" y="0.5" width="25" height="25" stroke-width="2px" stroke="#000" fill="red"/>
</svg>

【讨论】：

据我了解您的解决方案，它在响应式设置中不起作用，这意味着您不知道宽度，因此您需要将其设置为100%，对吗？
@JeanlucaScaljeri caniuse.com/#search=svg “IE9-11 桌面和移动设备无法正确缩放 SVG 文件。添加高度、宽度、viewBox 和 CSS 规则似乎是最好的解决方法。”这是一个已知的 IE 错误，安装 100% 视口将无济于事