在IE 7/8中呈現svg

按鈕在FF，Chrome，Safari中顯示正常。不會在IE 7/8中渲染。在IE 7/8中呈現svg

這是我一直在考慮代碼：

<!DOCTYPE html> 
    <html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="RadMenu.css"> 
    </head> 
    <body> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g id="g" shape-rendering="inherit" pointer-events="all"> 
    <circle cx="400" cy="210" r="25.6" fill="white" stroke="#505055" strokewidth="2"> 
    </circle> 
     <foreignObject x="383" y="192" width="32" height="32" id="PBtn16400210"> 
     <html> 
     <body> 
      <div class="Btn3D" title="" style="width: 101%; height: 100%; background-color: rgb(218, 184, 82); text-align: center; vertical-align: middle; background-position: initial initial; background-repeat: initial initial;"></div> 
     </body> 
     </html> 
     </foreignObject></g> 
    </svg> 
    </body> 
</html>

來源

2013-05-02 user2341255

我已經刪除的「我是新來的」文本一大堆和IE的版本中添加，你可能使用。隨意更新/恢復更改。還要指定你想要的工作（即IE7中的SVG支持）。 – 2013-05-02 01:02:49

請注意，在本地支持svg的IE版本（IE9，IE10）中不支持foreignObject。 – 2013-05-02 11:50:42

Internet Explorer中不支持SVG，直到V9（即使在當時這只是基本的支持）。

來源

2013-05-02 00:42:11

IE9有相當不錯的SVG支持。我會說這是超越基本的。 – 2013-05-02 01:44:33

我基於微軟的描述說，它支持「基本的SVG功能集」。 http://msdn.microsoft.com/en-us/ie/hh410107.aspx – 2013-05-02 01:46:10

ahh。我認爲他們只是謙虛。我最近做了很多瘋狂的SVG工作，IE9幾乎可以處理所有我投擲的東西。我認爲對大多數用戶來說沒問題 – 2013-05-02 02:48:48

IE在IE9中增加了對SVG的支持。以前的版本不支持它，並不會工作。但IE確實支持自己的VML矢量格式，所以可以編寫polyfills。其中一個項目是SVGWeb，它使用Flash來實現支持。對於你所需要的，它應該工作得很好。

有關詳細信息，請參閱http://code.google.com/p/svgweb/。

來源

2013-05-02 09:32:40

Raphaël爲您做SVG到VML的轉換，它理解本地SVG。這聽起來不像學習VML是值得的。

需要注意的一個重要的事情是IE 9和10都支持SVG中的外來對象。儘管在SVG規範中是可選的，但在支持某些功能時可能是一個嚴重的問題。所有其他主流瀏覽器都支持它。實際上，您的代碼在任何IE版本中都不會正確呈現。

來源

2013-05-02 09:38:46 David

您也可以考慮使用Ample SDK作爲SVG內容的墊片。例如：SVG Tiger

來源

2013-05-02 09:48:43

在SVG中是否支持異物？ – David 2013-05-02 20:30:00

下面是解決方案：在SVG之後添加此代碼。

<!--[if lte IE 8]><img src="image.png"><![endif]-->

（來源：https://j.eremy.net/inline-svg-with-ie8-fallback-support/）

在測試HTML，頂部和底部按鈕之間的圖像是SVG，藍色。對於Explorer 8是一個PNG，紅色。

a {text-decoration:none} 
 
button { 
 
padding-bottom:2px; 
 
width: 159px; 
 
height: 29px; 
 
border: 3px solid transparent; 
 
border-radius: 75px; 
 
color: #fff; 
 
display: block; 
 
font-weight: bold; 
 
font-size: 1.25em; 
 
margin: 0.75em auto; 
 
position: relative; 
 
cursor: pointer; 
 
} 
 

 
.btn-TOP {border: #7766A6; 
 
    background-color: #7766A6; 
 
} 
 

 
.btn-BOT {border:#F47320; 
 
background-color: #F47320; 
 
} 
 

 
.CENTER {margin: 0 auto; 
 
position:relative; 
 
display: block; 
 
} \t

<a href=""><button class="btn-TOP" id="CT">TOP</button></a> 
 

 
<p><?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg class="CENTER" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="160px" height="30px" 
 
\t viewBox="0 0 159 29" enable-background="new 0 0 159 29" xml:space="preserve"> 
 
<g> 
 
\t <path fill="#0072BB" d="M17.7,0.6l11.5,14L17.8,28.4h123.4l-11.4-13.9l11.5-14H17.7z"/> 
 
\t <g> 
 
\t \t <path fill="#FFFFFF" d="M51.3,15.8c0,1.9,0,3.2-0.1,4c-0.1,0.8-0.3,1.5-0.7,2.1c-0.4,0.6-1,1.1-1.7,1.5c-0.7,0.3-1.5,0.5-2.5,0.5 
 
\t \t \t c-0.9,0-1.7-0.2-2.4-0.5c-0.7-0.3-1.3-0.8-1.7-1.5s-0.7-1.4-0.8-2.1c-0.1-0.8-0.1-2.1-0.1-4v-3.2c0-1.9,0-3.2,0.1-4 
 
\t \t \t c0.1-0.8,0.3-1.5,0.7-2.1c0.4-0.6,1-1.1,1.7-1.5c0.7-0.3,1.5-0.5,2.5-0.5c0.9,0,1.7,0.2,2.4,0.5c0.7,0.3,1.3,0.8,1.7,1.5 
 
\t \t \t c0.4,0.7,0.7,1.4,0.8,2.1c0.1,0.8,0.1,2.1,0.1,4V15.8z M46.9,9.7c0-0.9,0-1.4-0.1-1.7c-0.1-0.2-0.3-0.4-0.5-0.4 
 
\t \t \t c-0.2,0-0.4,0.1-0.5,0.3c-0.1,0.2-0.2,0.8-0.2,1.7v8.7c0,1.1,0,1.7,0.1,2c0.1,0.3,0.3,0.4,0.6,0.4c0.3,0,0.5-0.1,0.6-0.4 
 
\t \t \t c0.1-0.3,0.1-1,0.1-2.1V9.7z"/> 
 
\t \t <path fill="#FFFFFF" d="M52.9,4.9H56c2.1,0,3.5,0.1,4.2,0.3c0.7,0.2,1.3,0.6,1.8,1.4c0.5,0.7,0.7,1.9,0.7,3.5 
 
\t \t \t c0,1.4-0.2,2.4-0.5,2.9c-0.3,0.5-1,0.8-1.9,0.9c0.9,0.2,1.5,0.6,1.7,1c0.3,0.4,0.5,0.8,0.6,1.1c0.1,0.3,0.1,1.3,0.1,2.8v4.9h-4.1 
 
\t \t \t v-6.2c0-1-0.1-1.6-0.2-1.8c-0.1-0.2-0.5-0.4-1.1-0.4v8.4h-4.4V4.9z M57.3,8.1v4.1c0.5,0,0.8-0.1,1-0.2c0.2-0.1,0.3-0.6,0.3-1.5v-1 
 
\t \t \t c0-0.6-0.1-1-0.3-1.2C58.1,8.2,57.8,8.1,57.3,8.1z"/> 
 
\t \t <path fill="#FFFFFF" d="M68.8,4.9v18.6h-4.4V4.9H68.8z"/> 
 
\t \t <path fill="#FFFFFF" d="M80.6,11.8h-4.4v-1.7c0-1.1,0-1.7-0.1-2c-0.1-0.3-0.3-0.4-0.6-0.4c-0.3,0-0.5,0.1-0.6,0.3 
 
\t \t \t c-0.1,0.2-0.1,0.8-0.1,1.8v8.9c0,0.8,0,1.4,0.1,1.6c0.1,0.3,0.3,0.4,0.6,0.4c0.3,0,0.5-0.1,0.7-0.4c0.1-0.3,0.2-0.9,0.2-1.7v-2.2 
 
\t \t \t h-0.9v-2.8h5.1v10h-2.8l-0.4-1.3c-0.3,0.6-0.7,1-1.1,1.3c-0.5,0.3-1,0.4-1.6,0.4c-0.7,0-1.4-0.2-2.1-0.6c-0.6-0.4-1.1-0.9-1.5-1.5 
 
\t \t \t c-0.3-0.6-0.5-1.2-0.6-1.8c-0.1-0.6-0.1-1.6-0.1-2.9v-5.5c0-1.8,0.1-3.1,0.3-3.9c0.2-0.8,0.7-1.5,1.5-2.2c0.8-0.7,1.9-1,3.2-1 
 
\t \t \t c1.3,0,2.3,0.3,3.2,0.9C79.4,6,80,6.7,80.2,7.5c0.3,0.8,0.4,2,0.4,3.5V11.8z"/> 
 
\t \t <path fill="#FFFFFF" d="M86.7,4.9v18.6h-4.4V4.9H86.7z"/> 
 
\t \t <path fill="#FFFFFF" d="M98.2,4.9v18.6h-3.8l-2.3-8.5v8.5h-3.7V4.9h3.7l2.5,8.4V4.9H98.2z"/> 
 
\t \t <path fill="#FFFFFF" d="M107.6,4.9l2.5,18.6h-4.5l-0.2-3.3h-1.6l-0.3,3.3H99l2.2-18.6H107.6z M105.2,16.9 
 
\t \t \t c-0.2-2.1-0.4-4.7-0.7-7.8c-0.4,3.6-0.7,6.2-0.8,7.8H105.2z"/> 
 
\t \t <path fill="#FFFFFF" d="M115.2,4.9v14.9h2.7v3.7h-7.1V4.9H115.2z"/> 
 
\t </g> 
 
\t <g> 
 
\t \t <polygon fill="#FFFF00" points="146.9,5.1 149.4,10.1 154.9,11 150.9,14.9 151.9,20.4 146.9,17.8 141.9,20.4 142.9,14.9 138.9,11 
 
\t \t \t 144.4,10.1 \t \t "/> 
 
\t \t <polygon fill="#FFFF00" points="12.1,5.1 14.6,10.1 20.1,11 16.1,14.9 17.1,20.4 12.1,17.8 7.1,20.4 8.1,14.9 4.1,11 9.6,10.1 \t \t 
 
\t \t \t "/> 
 
\t </g> 
 
</g> 
 
</svg> 
 
    
 
    <!--[if lte IE 8]> 
 
    <img src="https://image.ibb.co/juwfov/FLAG.png" class="CENTER"> 
 
<![endif]--> 
 
</p> 
 

 
<a href=""><button class="btn-BOT" id="CT">BOTTOM</button></a>

HTML測試： https://danielillo.neocities.org/testSVG.html

來源

2017-03-30 19:11:38 Danielillo

在IE 7/8中呈現svg

回答

相關問題