Internet Explorer中的SVG扩展

Question

我在以下问题中尝试了这些解决方案，但它们似乎都不起作用：

• Scaling/Resizing SVG in an HTML
• How to scale SVG properly and responsively in HTML5?
• Best practice for using SVGs, regarding height and width?

在上一个问题中，高度和宽度都在CSS中指定，但我只想指定其中一个尺寸。例如，目前我的CSS中有一个max-height来控制图像的高度。

这是我的代码：

HTML

<a href='#schedule'>
    <img src='images/calendar.svg' alt='' role='presentation' class='nav-item-icon'>
    <span class='nav-item-text'>Schedule</span>
</a>

CSS

.navigation-main a {
    padding: 0.5rem 0;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}
.nav-item-icon {
    max-height: 1.5em;
    vertical-align: middle;
}
.nav-item-text {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.5em;
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="82.7272727273px" height="100px" viewBox="0 0 91.59 110.063"
    enable-background="new 0 0 91.59 110.063" xml:space="preserve">
    <!-- codes -->
</svg>

结果

Internet Explorer 11

Firefox和Chrome

我已经尝试删除SVG的高度和宽度属性，但这使得SVG在所有浏览器中都是父元素的100％宽度，除非我在CSS中指定宽度。内联SVG并没有什么不同。

可能有一种方法可以通过获取计算出的高度并手动设置宽度来在JavaScript中执行此操作，但我宁愿不诉诸此类黑客攻击。有没有办法让图像在Internet Explorer中正确缩放？

Answer 1

在Internet-Explorer中，您需要定义viewBox以便它可以很好地扩展 您已定义了一个viewBox，其宽度和高度与宽度和高度属性不同。
它是否正确 ？我的猜测不是。

然后您还使用逗号值定义了像素。
这是无稽之谈。
像素是离散单元。
没有半像素或四分之一像素。
IE可能无法正确消毒或解释这些价值观。

您应该尝试：

width="82px" height="100px" viewBox="0 0 82 100"

还要摆脱xml:space="preserve"。
IE不支持它。