缩放 SVG 不适用于 Internet Explorer答案

【问题标题】：Scaling SVG not working with Internet Explorer缩放 SVG 不适用于 Internet Explorer
【发布时间】：2016-01-25 19:52:40
【问题描述】：

我在 Internet Explorer 中遇到 SVG 缩放问题。

在 Chrome 中看起来像这样：

但在 Internet Explorer 中它看起来像这样：

HTML：

<header id="topbar">
  <div id="wrapper">
    <div id="logo">
      <a href="/">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="64.2 25.7 158 49.9" style="width: 100%; enable-background:new 64.2 25.7 158 49.9;" xml:space="preserve"></svg>
      </a>
    </div>
</header>

CSS：

#topbar {
  width: 100%;
  max-width: 200px;
  height: 150px;
  margin: auto;
  overflow: hidden;
  background: red;
}

#topbar #wrapper {
  width: 100%;
  height: 100%;
  display: table;
}

#topbar #wrapper #logo {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

#topbar #wrapper #logo svg {
  height: 50%;
  background: blue;
}

有没有不做特别的事情的快速解决方法？

代码：http://codepen.io/jakej/pen/vNRzGp

【问题讨论】：

我发现浏览器之间的高度/宽度有一些奇怪的问题，我使用父对象作为实际大小，只是告诉 svg 是容器的 100% 高度/宽度。适用于所有浏览器。
显式高度似乎是唯一无法获得默认大小的方法：css-tricks.com/scale-svg.

标签： javascript html css internet-explorer svg

【解决方案1】：

试试这个似乎对我有用

#topbar #wrapper #logo a {
    display: block;
    width: 100%;
    height: 50%;
    background: blue;
}

【讨论】：