Firefox 34.0.5和IE 11中未呈现SVG

Question

I am working on a website where I am using a lot of SVG elements. Now lately I have seen that the elements are being rendered in Chrome Version 39.0.2171.95 m and Opera. However, that is not the case with Firefox Version 34.0.5 and Internet Explorer 11. I have checked this answer

SVG not rendering properly in Firefox ,

According to the above answer it says that this is a bug in FF 16 however they have resolved it in the latest versions of FF even in IE11 and as far as my research goes, SVG is not an issue with IE11. Now the strange thing is that all the simple SVG files are being rendered however a complex vector file such as a vector of iPhone 5 is not rendered ONLY in IE and FF. Below is an SVG thats not working in FF or IE:

<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     "/>

Click this Fiddle So you can get a better understanding of the issue.

I created the SVG in Illusrator CS6. So my question is Whats the phenomena here ? What mistake am I doing here ? Is this is a bug in IE and FF ? I am using SVG because I want to incorporate some SVG animations. Are there any good Fallbacks for this issue to be solved ? Can I get some good resources regarding this specific issue ? I apologize if this information is not sufficient, as I am a beginner in SVG animation hence I am open for advices, criticism etc as I am in the learning phase. If there is any extra information required please let me know and I will respond.

EDIT: Please check the Fiddle in FF, IE and Chrome to see the difference.

Thanks for your Help !

Answer 1

It is because of your filter :
Change this line <feOffset result = "offOut" in = "#000000" dx = "0" dy = "10"/> to this one <feOffset result = "offOut" in = "SourceGraphic" dx = "0" dy = "10"/>

And it will work.

You were telling the filter to go from a color instead of a filter-primitive (check http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveInAttribute )

Updated Fiddle