svg file and animation for all browser - css

Question

I have svg file, which i need to animate, i didn know how to animate polygon inside this file so i decide to use CSS3 animation intead, but not all browser display it right, i mean for firefox and safari there is no animation, why?
This is svg file code: (plus_animation.svg)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="104.5px"
height="104px" viewBox="0 0 104.5 104" enable-background="new 0 0 104.5 104" xml:space="preserve">
<style type="text/css" >
<![CDATA[
#-webkit-keyframes pulse_animationW {
0% { -webkit-transform: scale(1); }
20% { -webkit-transform: scale(0.9); }
40% { -webkit-transform: scale(0.7); }
50% { -webkit-transform: scale(0.5); }
60% { -webkit-transform: scale(0.7); }
80% { -webkit-transform: scale(0.9); }
100% { -webkit-transform: scale(1); }
}
#-moz-keyframes pulse_animationM {
0% { -moz-transform: scale(1); }
20% { -moz-transform: scale(0.9); }
40% { -moz-transform: scale(0.7); }
50% { -moz-transform: scale(0.5); }
60% { -moz-transform: scale(0.7); }
80% { -moz-transform: scale(0.9); }
100% { -moz-transform: scale(1); }
}
#-moz-keyframes pulse_animationMS {
0% { -ms-transform: scale(1); }
20% { -ms-transform: scale(0.9); }
40% { -ms-transform: scale(0.7); }
50% { -ms-transform: scale(0.5); }
60% { -ms-transform: scale(0.7); }
80% { -ms-transform: scale(0.9); }
100% { -ms-transform: scale(1); }
}
#keyframes pulse_animation {
0% { transform: scale(1); }
20% { transform: scale(0.9); }
40% { transform: scale(0.7); }
50% { transform: scale(0.5); }
60% { transform: scale(0.7); }
80% { transform: scale(0.9); }
100% { transform: scale(1); }
}
#topPlus{
-webkit-animation-name: 'pulse_animationW';
-webkit-animation-duration: 1000ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: 'pulse_animationM';
-moz-animation-duration: 1000ms;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: 'pulse_animationMS';
-ms-animation-duration: 1000ms;
-ms-transform-origin:50% 50%;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: 'pulse_animation';
animation-duration: 1000ms;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.botPlus{
-webkit-animation-name: 'pulse_animationW';
-webkit-animation-duration: 500ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: 'pulse_animationM';
-moz-animation-duration: 500ms;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: 'pulse_animationMS';
-ms-animation-duration: 500ms;
-ms-transform-origin:50% 50%;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: 'pulse_animation';
animation-duration: 500ms;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#midPlus{
-webkit-animation-name: 'pulse_animationW';
-webkit-animation-duration: 2000ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: 'pulse_animationM';
-moz-animation-duration:2000ms;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: 'pulse_animationMS';
-ms-animation-duration: 2000ms;
-ms-transform-origin:50% 50%;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: 'pulse_animation';
animation-duration: 2000ms;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
]]>
</style>
<g id="Warstwa_2" display="none">
<rect x="-2637.5" y="-1982" display="inline" fill="#1D1D1B" stroke="#1D1D1B" stroke-miterlimit="10" width="6919" height="3576"/>
</g>
<g id="Warstwa_1">
<g>
<polygon id="midPlus" fill="#FFFFFF" points="56,48.5 56,2.5 49,2.5 49,48.5 3,48.5 3,55.5 49,55.5 49,101.5 56,101.5 56,55.5 102,55.5
102,48.5 "/>
<rect class="botPlus" x="3.086" y="82.952" fill="#FFFFFF" width="32.817" height="3.834"/>
<rect class="botPlus" x="17.578" y="68.462" fill="#FFFFFF" width="3.834" height="32.815"/>
<polygon id="topPlus" fill="#FFFFFF" points="102,17.5 87,17.5 87,2.5 83,2.5 83,17.5 69,17.5 69,21.5 83,21.5 83,35.5 87,35.5 87,21.5
102,21.5"/>
<rect x="3.332" y="3.06" fill="none" stroke="#FFFFFF" stroke-width="0.996" stroke-miterlimit="10" width="97.971" height="97.973"/>
<rect x="3.332" y="3.06" fill="none" stroke="#FFFFFF" stroke-width="0.996" stroke-miterlimit="10" width="97.971" height="97.973"/>
<rect x="19.495" y="19.223" fill="none" stroke="#FFFFFF" stroke-width="0.996" stroke-miterlimit="10" width="65.646" height="65.646"/>
<rect x="2.833" y="2.561" fill="none" width="98.968" height="98.97"/>
</g>
</g>
</svg>
This is code in html page:
<div class="col-sm-offset-1 col-sm-2 text-center logoSVG">
<img src="~/Content/img/technology_partners/benefits/plus.svg" alt="SVG">
<p class="benefit-description">#Model.Benefit_1Text</p>
</div>
this is jQuery code:
$(document).ready(function () {
$('#benefits-div .logoSVG img').hover(function () {
var split = $(this).attr("src").split(".svg");
$(this).attr("src", split[0] + "_animation.svg");
}, function () {
var split = $(this).attr("src").split("_animation.svg");
$(this).attr("src", split[0] + ".svg");
});
});