SVG和Internet Explorer？

Question

有誰知道SVG是否在最新版本的IE中工作？

Answer 1

你需要一個插件來獲得它在當前穩定版本的IE瀏覽器。但是，IE9在發佈時應該提供SVG支持（Microsoft blog post）。

Answer 2

即低於版本9不支持SVG組件，但IE 8和下方支撐VML而是使SVG在最近版本的IE瀏覽器的工作，你可以在你的HTML文件的頭部輸入以下代碼

<meta http-equiv="X-UA-Compatible" content="chrome=1"> 
<!--[if IE]> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> 

<style> 
.chromeFrameInstallDefaultStyle { 
    position:fixed; 
    overflow:auto; 
    width: 800px; /* default is 800px */ 
    height: 80%; /* default is 800px */ 
    border: 5px solid blue; 
    right:100px; 
    bottom:100px; 
    z-index: 99999 !important; 
} 
</style> 

<div id="prompt"> 
    <!-- if IE without GCF, prompt goes here --> 
</div> 

<script> 
    // The conditional ensures that this code will only execute in IE, 
    // Therefore we can use the IE-specific attachEvent without worry 
    window.attachEvent("onload", function() { 
     CFInstall.check({ 
      mode: "inline", // the default 
      node: "prompt" 
     }); 
    }); 
</script> 
<![endif]--> 

這將要求用戶在IE上安裝谷歌框架。只需要幾分鐘。之後，所有html5組件以及SVG組件都可以使用。

Answer 3

http://caniuse.com/#search=svg

爲IE

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'"> 

的Modernizr：

.main-header { 
    background: url(logo.svg) no-repeat top left; 
    background-size: contain; 
} 

.no-svg .main-header { 
    background-image: url(logo.png); 
} 

和其他解決方案：

<svg> ... </svg> 
<div class="fallback"></div> 


.logo-fallback { 
    display: none; 

} 
.no-svg .logo-fallback { 
    background-image: url(logo.png); 
}