blocks|key|2233801|text|直到v9，Internet+Explorer才支持SVG+(即使到那时，它也只是基本的支持)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2233802|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Internet Explorer didn't support SVG until v9 (and even then it was only basic support).</p>


blocks|key|5338955|text|Raphaël为你做了SVG到VML的转换，它能理解原生SVG。在您的情况下，学习VML听起来并不值得。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5338956|需要注意的关键一点是，IE+9或10支持SVG中的外来对象。尽管在SVG规范中是可选的，但在支持某些功能时，这可能是一个严重的问题。所有其他主流浏览器都支持它。实际上，您的代码在任何IE版本中都不能正确呈现。|5338957|entityMap|0|LINK|mutability|MUTABLE|url|http://raphaeljs.com/^0|0|7|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p><a href="http://raphaeljs.com/" rel="nofollow">Raphaël</a> does SVG to VML conversion for you, it understands native SVG. It doesn't sound like learning VML is worth it in your case.</p>

<p>One critical thing to note is that IE 9, nor 10 support foreign objects in SVG. Although optional in the SVG specifications, it can be a serious issue when supporting certain functionality. All other major browsers do support it. Your code will, in fact, not render correctly in any IE version.</p>


blocks|key|2233820|text|IE在IE9中添加了对SVG的支持。以前的版本不支持它，也不能工作。然而，IE确实支持它自己的称为VML的矢量格式，因此可以编写polyfills。一个这样的项目是SVGWeb，它使用闪存来实现支持。对于你需要的东西，它应该工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2233821|详情请参见http://code.google.com/p/svgweb/。|offset|length|2233822|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/svgweb/^0|0|5|W|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>IE added support for SVG in IE9. Previous versions do not support it, and wont work. IE does support its own vector format called VML however, so it is possible to write polyfills. One such project is SVGWeb, which uses Flash to implement support. For what you need it should work well. </p>

<p>See <a href="http://code.google.com/p/svgweb/" rel="nofollow">http://code.google.com/p/svgweb/</a> for details.</p>


blocks|key|5338986|text|您还可以考虑使用Ample+SDK作为SVG内容的填充程序。一个例子：SVG+Tiger|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5338987|entityMap|0|LINK|mutability|MUTABLE|url|http://www.amplesdk.com/|1|http://www.amplesdk.com/examples/markup/svg/tiger/^0|8|9|0|Z|9|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>You can also consider using <a href="http://www.amplesdk.com" rel="nofollow">Ample SDK</a> as a shim for your SVG content. An example: <a href="http://www.amplesdk.com/examples/markup/svg/tiger/" rel="nofollow">SVG Tiger</a></p>


blocks|key|3226566|text|下面是解决方案:在SVG之后添加以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3226567|++|code-block|syntax|javascript|3226568|(来源：https://j.eremy.net/inline-svg-with-ie8-fallback-support/)|offset|length|3226569|在测试html上，顶部和底部按钮之间的图像是SVG，蓝色。对于Explorer+8是一个红色的PNG。|3226570|​|3226571|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;
}	|3226572|<a+href=""><button+class="btn-TOP"+id="CT">TOP</button></a>

<p><?xml+version="1.0"+encoding="utf-8"?>

<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>
++
++
</p>

<a+href=""><button+class="btn-BOT"+id="CT">BOTTOM</button></a>|3226573|3226574|测试html：https://danielillo.neocities.org/testSVG.html|3226575|entityMap|0|LINK|mutability|MUTABLE|url|https://j.eremy.net/inline-svg-with-ie8-fallback-support/|1|https://danielillo.neocities.org/testSVG.html^0|0|0|4|1L|0|0|0|0|0|0|0|7|19|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@$I|18|J|19|1|1A]]|A|$]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|S|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1G|8|@]|9|@$I|1H|J|1I|1|1J]]|A|$]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

<p>Here's the solution: adding this code after the SVG. </p>

<pre><code>  &lt;!--[if lte IE 8]&gt;&lt;img src="image.png"&gt;&lt;![endif]--&gt;
</code></pre>

<p>(Source: <a href="https://j.eremy.net/inline-svg-with-ie8-fallback-support/" rel="nofollow noreferrer">https://j.eremy.net/inline-svg-with-ie8-fallback-support/</a>)</p>

<p>On the testing html, the image between the top and bottom buttons is a SVG, blue. For Explorer 8 is a PNG, red.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}	</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href=""&gt;&lt;button class="btn-TOP" id="CT"&gt;TOP&lt;/button&gt;&lt;/a&gt;

&lt;p&gt;&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
&lt;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"&gt;
&lt;g&gt;
	&lt;path fill="#0072BB" d="M17.7,0.6l11.5,14L17.8,28.4h123.4l-11.4-13.9l11.5-14H17.7z"/&gt;
	&lt;g&gt;
		&lt;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"/&gt;
		&lt;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"/&gt;
		&lt;path fill="#FFFFFF" d="M68.8,4.9v18.6h-4.4V4.9H68.8z"/&gt;
		&lt;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"/&gt;
		&lt;path fill="#FFFFFF" d="M86.7,4.9v18.6h-4.4V4.9H86.7z"/&gt;
		&lt;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"/&gt;
		&lt;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"/&gt;
		&lt;path fill="#FFFFFF" d="M115.2,4.9v14.9h2.7v3.7h-7.1V4.9H115.2z"/&gt;
	&lt;/g&gt;
	&lt;g&gt;
		&lt;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 		"/&gt;
		&lt;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 		
			"/&gt;
	&lt;/g&gt;
&lt;/g&gt;
&lt;/svg&gt;
  
  &lt;!--[if lte IE 8]&gt;
  &lt;img src="https://image.ibb.co/juwfov/FLAG.png" class="CENTER"&gt;
&lt;![endif]--&gt;
&lt;/p&gt;

&lt;a href=""&gt;&lt;button class="btn-BOT" id="CT"&gt;BOTTOM&lt;/button&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>Test html:
<a href="https://danielillo.neocities.org/testSVG.html" rel="nofollow noreferrer">https://danielillo.neocities.org/testSVG.html</a></p>


<p>Button displays fine in FF, Chrome, Safari. Will not render in IE 7/8.</p>

<p>Here's the code I've been given:</p>

<pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="RadMenu.css"&gt;
    &lt;/head&gt;
  &lt;body&gt;
     &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
     &lt;g id="g" shape-rendering="inherit" pointer-events="all"&gt;
     &lt;circle cx="400" cy="210" r="25.6" fill="white" stroke="#505055" strokewidth="2"&gt;
     &lt;/circle&gt;
       &lt;foreignObject x="383" y="192" width="32" height="32" id="PBtn16400210"&gt;
         &lt;html&gt;
         &lt;body&gt;
            &lt;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;"&gt;&lt;/div&gt;
         &lt;/body&gt;
         &lt;/html&gt;
      &lt;/foreignObject&gt;&lt;/g&gt;
     &lt;/svg&gt; 
   &lt;/body&gt;
&lt;/html&gt;
</code></pre>


Rendering svg in IE 7/8

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

按钮在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/2

问在IE 7/8中渲染svg
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在IE 7/8中渲染svgEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在IE 7/8中渲染svg
EN