SVG图标未正确放置在Internet Explorer 11上

Question

我在Internet Explorer 11上有这个奇怪的错误。

对于我的徽标，我使用 SVG 图标和 h2 元素，如下所示：

<div class="logo">
    <a href="#">
        <img class="svg" src="~/_img/logo.svg"/>
        <h2>Muffin-Welt.de</h2>
    </a>
</div>

这是 CSS ：

.logo h2 {
    font-size: 33px;
    left: 80px;
    display: inline;
    color: white;
    position: absolute;
}

.logo svg {
    width: 54px;
    margin-top: 10px;
}

.logo path {
    fill: #fff;
    transition: all ease 1s;
    margin-top: 10px;
}

在普通浏览器上，这看起来像这样：

但出于某种原因，它在IE11上看起来像这样（没有其他浏览器）

我还有一个我的网络项目测试域，您可以自己查看问题：http://test.muffin-welt.de/

Answer 1

确保包括preserveAspectRatio =＆＃34; xMinYMin＆＃34;在你的svg标签中。这解决了我的问题，我在Chrome，IE和Firefox中进行了测试。

＆＃13;

＆＃13;

Externalizable

＆＃13;

body{ background-color: grey;}/* added so we can see results */
.logo h2 {
  font-size: 33px;
  left: 80px;
  display: inline;
  color: white;
  position: absolute;
}

.logo svg {
  width: 54px;
  margin-top: 10px;
}

.logo path {
  fill: #fff;
  transition: all ease 1s;
  margin-top: 10px;
}

＆＃13;

＆＃13;

＆＃13;