SVG 未在 Firefox 34.0.5 和 IE 11 中呈现

Question

我在一个使用大量 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 动画。有没有什么好的 Fallbacks 可以解决这个问题？我可以获得关于这个特定问题的一些好的资源吗？如果这些信息不充分，我深表歉意，因为我是 SVG 动画的初学者，因此在学习阶段我愿意接受建议、批评等。如果需要任何额外信息，请告诉我，我会回复。

编辑：请检查 the Fiddle 在 FF、IE 和 Chrome 中的区别。

感谢您的帮助！

Answer 1

是因为你的过滤器:
将这一行 <feOffset result = "offOut" in = "#000000" dx = "0" dy = "10"/> 更改为这一行 <feOffset result = "offOut" in = "SourceGraphic" dx = "0" dy = "10"/>

它会起作用。

您告诉过滤器从颜色而不是过滤器基元开始（检查 http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveInAttribute）

Updated Fiddle

SVG 未在 Firefox 34.0.5 和 IE 11 中呈现

SVG is not being rendered in Firefox 34.0.5 and IE 11

javascript

html

css

internet-explorer

svg