Масштабирование SVG не работает с Internet Explorer

Question

У меня возникают проблемы с масштабированием SVG в Internet Explorer.

В 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

Answer 1

попробовать это, кажется, работает для меня

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