【发布时间】：2015-03-08 16:33:26
【问题描述】：
我正在一个使用大量 SVG 元素的网站上工作。现在最近我看到这些元素正在 Chrome 版本 39.0.2171.95 m 和 Opera 中呈现。但是，Firefox 版本 34.0.5 和 Internet Explorer 11 并非如此。我已经检查了这个答案
SVG not rendering properly in Firefox,
根据上面的答案，它说这是 FF 16 中的一个错误，但是他们已经在最新版本的 FF 中解决了它，甚至在 IE11 中，据我的研究，SVG 不是 IE11 的问题。 现在奇怪的是，所有简单的 SVG 文件都在被渲染，但是像 iPhone 5 的矢量这样的复杂矢量文件在 IE 和 FF 中没有ONLY 渲染。以下是在 FF 或 IE 中无法使用的 SVG：
<svg 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="210px" height="211.5px" viewBox="0 0 210 211.5" style="enable-background:new 0 0 210 211.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF5200;}
.st1{fill:none;stroke:#FF5200;stroke-width:7;stroke-miterlimit:10;}
</style>
<filter id="drop">
<feOffset result = "offOut" in = "#ff5500" dx = "0" dy = "0"/>
<feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "4"/>
<feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/>
</filter>
<g id="bolt">
<polygon filter="url(#drop)" class="st0" points="138.1,42.5 63.9,116.3 105.2,116.3 70.2,172.3 146.3,98.5 105.1,98.5 "/>
点击this Fiddle，可以更好的理解问题。
我在 Illustrator CS6 中创建了 SVG。所以我的问题是这里的现象是什么？我在这里犯了什么错误？这是 IE 和 FF 中的错误吗？我使用 SVG 是因为我想加入一些 SVG 动画。有什么好的后备方案可以解决这个问题吗？我可以得到一些关于这个特定问题的好资源吗？如果这些信息不充分，我深表歉意，因为我是 SVG 动画的初学者，因此在学习阶段我愿意接受建议、批评等。如果需要任何额外信息，请告诉我，我会回复。
编辑：请在 FF、IE 和 Chrome 中检查 the Fiddle 以查看区别。
感谢您的帮助！
【问题讨论】：
-
除非您向我们展示不起作用的标记，否则我们怎么知道您犯了什么错误？请在您的问题中添加一个小示例。
-
哦，抱歉，我现在就发帖！！
-
@RobertLongson 这里是 SVG 的 the fiddle。你会明白我在说什么。
-
Op 努力编辑了这个问题。没有理由投反对票。
-
因为根据 SVG 规范，您拥有 Firefox 和 IE 所做的标记是正确的，而 Chrome 所做的则不正确。 SVG 规范说明了应该发生的情况，如果这不是您所期望的，请更改规范。在那之前，Chrome 有一个错误，因为它没有遵循 SVG 规范。
标签： javascript html css internet-explorer svg