在 IE 7/8 中渲染 svg答案

【问题标题】：Rendering svg in IE 7/8在 IE 7/8 中渲染 svg
【发布时间】：2017-03-31 03:11:38
【问题描述】：

按钮在 FF、Chrome、Safari 中显示良好。不会在 IE 7/8 中呈现。

这是我得到的代码：

<!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>

【问题讨论】：

我删除了一大堆“我是新来的”文本，并添加了您可能使用的 IE 版本。随时更新/还原更改。还要指定你想要做什么（即 IE7 中的 SVG 支持）。
请注意，原生支持svg的IE版本（IE9、IE10）不支持foreignObject。

标签： html internet-explorer svg

【解决方案1】：

Internet Explorer 直到 v9 才支持 SVG（即使在那时它也只是基本支持）。

【讨论】：

IE9 有相当不错的 SVG 支持。我会说这超出了基本范围。
我基于微软的描述，它支持“基本的 SVG 功能集”。 msdn.microsoft.com/en-us/ie/hh410107.aspx
啊。我认为他们只是谦虚。我最近做了很多疯狂的 SVG 东西，IE9 几乎可以处理我扔给它的所有东西。我认为它适用于大多数用途

【解决方案2】：

Raphaël 为您进行 SVG 到 VML 的转换，它理解原生 SVG。在你的情况下，学习 VML 听起来并不值得。

需要注意的一个关键点是 IE 9 和 10 都支持 SVG 中的外来对象。虽然在 SVG 规范中是可选的，但在支持某些功能时它可能是一个严重的问题。所有其他主要浏览器都支持它。事实上，您的代码在任何 IE 版本中都无法正确呈现。

【讨论】：

【解决方案3】：

IE 在 IE9 中添加了对 SVG 的支持。以前的版本不支持它，并且不会工作。然而，IE 确实支持它自己的称为 VML 的矢量格式，因此可以编写 polyfill。一个这样的项目是 SVGWeb，它使用 Flash 来实现支持。对于您所需要的，它应该可以正常工作。

详情请见http://code.google.com/p/svgweb/。

【讨论】：

【解决方案4】：

您还可以考虑使用Ample SDK 作为 SVG 内容的填充程序。一个例子：SVG Tiger

【讨论】：

Ample 是否支持 SVG 中的异物？

【解决方案5】：

解决方案如下：在 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;
}

<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"
	 viewBox="0 0 159 29" enable-background="new 0 0 159 29" xml:space="preserve">
<g>
	<path fill="#0072BB" d="M17.7,0.6l11.5,14L17.8,28.4h123.4l-11.4-13.9l11.5-14H17.7z"/>
	<g>
		<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
			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
			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
			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
			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
			c0.1-0.3,0.1-1,0.1-2.1V9.7z"/>
		<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
			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
			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
			c0-0.6-0.1-1-0.3-1.2C58.1,8.2,57.8,8.1,57.3,8.1z"/>
		<path fill="#FFFFFF" d="M68.8,4.9v18.6h-4.4V4.9H68.8z"/>
		<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
			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
			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
			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
			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"/>
		<path fill="#FFFFFF" d="M86.7,4.9v18.6h-4.4V4.9H86.7z"/>
		<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"/>
		<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
			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"/>
		<path fill="#FFFFFF" d="M115.2,4.9v14.9h2.7v3.7h-7.1V4.9H115.2z"/>
	</g>
	<g>
		<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 
			144.4,10.1 		"/>
		<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 		
			"/>
	</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

【讨论】：