包含SVG的框在Internet Explorer上有所不同

Question

我正在使用SVG的网站上工作，我在IE9 / 10/11上遇到了一个奇怪的问题。无论出于何种原因，在IE上，SVG的包含框似乎随机添加了填充，这会导致对齐。

在Chrome / Firefox / Safari中，SVG的包含框（对不起，如果这是不正确的术语）适合图像的边缘：

然而，当我在IE中检查完全相同的SVG时，似乎在图像的顶部和底部添加了一些填充（蓝色边框显示元素的高度）：

以下是SVG的代码：

<svg id="date" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 118.5 60.1" xml:space="preserve" fill="#000">
    <g>
        <path d="M7.4,14.9c0-5.4,0-14.5,0-14.5H11c0,0,0,8.4,0,13.7c0,4.4-2.4,5.9-5.5,5.9c-2.7,0-4.7-1.5-5.5-4.1l3-1.4
            c0.4,1.3,1.3,2.3,2.6,2.3C6.9,16.8,7.4,15.8,7.4,14.9z"/>
        <path d="M15.3,12.6c0-4.3,0-12.2,0-12.2h3.6c0,0,0,8.1,0,12.1c0,2.1,1.3,3.8,3.8,3.8c2.8,0,3.7-1.9,3.7-4c0-4,0-11.9,0-11.9h3.6
            c0,0,0,7.8,0,12c0,4-2.4,7.2-7.3,7.2C17.6,19.6,15.3,16.6,15.3,12.6z"/>
        <path d="M34.3,19.2V0.4h3.6V16h5.9v3.2H34.3z"/>
        <path d="M44.9,0.4h4.2l3.7,6.5l3.8-6.5h4.1l-6.1,9.9v9H51v-9L44.9,0.4z"/>
        <path d="M71.8,5.4c0-3.3,2.8-5.4,5.8-5.4c3.5,0,6.2,2.2,6.2,5.2c0,2.2-1,3.2-2.7,4.1c2.2,0.8,3.2,2.5,3.2,4.7
            c0,3.5-2.9,5.6-6.3,5.6c-3.4,0-6.5-1.9-6.5-5.6c0-2.2,1.1-3.7,3.1-4.7C73.1,9,71.8,7.3,71.8,5.4z M75,13.8c0,1.6,1.3,2.8,2.8,2.8
            c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.2-2.9-2.8-2.9C76.3,10.9,75,12.2,75,13.8z M75.3,5.6c0,1.5,1.1,2.5,2.6,2.5c1.5,0,2.5-1,2.5-2.5
            c0-1.5-1.1-2.7-2.6-2.7C76.4,2.9,75.3,4.1,75.3,5.6z"/>
        <path d="M87.3,10h14.8v2.9H87.3V10z"/>
        <path d="M118.5,7c0,2.4-1,4.1-2.5,6.3l-3.9,5.9h-4.3l5.3-7.2c0,0-1.3,0.8-3,0.8c-3.3,0-5.8-2.7-5.8-6c0-3.9,2.9-6.9,7-6.9
            C116.1,0,118.5,3.2,118.5,7z M115,6.6c0-2-1.6-3.6-3.6-3.6s-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6C113.5,10.2,115,8.6,115,6.6z"/>
    </g>
    <g>
        <polygon points="38.9,38.7 79.5,38.7 59.2,60.1  "/>
    </g>
</svg>

这似乎与我的所有SVG一起发生。有谁知道造成这种不一致的原因是什么？

Answer 1

IE错误地要求您为元素提供明确的宽度和高度，否则默认为300 x 150，它应该能够像使用其他UA一样使用viewBox来解决某些问题。

如果您想要更好的跨浏览器兼容性，请尝试提供SVG显式宽度和高度属性。