SVG animatetransform rotation, not working perfectly on ie and firefox - css

Question

I'm trying to animate a simple svg image using
I've got 4 petals (polygonal shapes), a Circle , and a rectangle. I want to rotate the petals around the circle,
My code is as follows
<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" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #A9A9AD;
}
.st1 {
fill: #FEF058;
}
#Circleelement {
transform-origin: center;
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<g id="Circleelement" transform="translate(150 170) rotate(45) translate(-150 -170)">
<g id="petals">
<g id="petal4" onclick="notify(this,"select");">
<path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
<polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 " />
</g>
<g id="petal3" onclick="notify(this,"select");">
<path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
<polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 " />
</g>
<g id="petal2" onclick="notify(this,"select");">
<path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
<polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 " />
</g>
<g id="petal1" onclick="notify(this,"select");">
<path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
<polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 " />
</g>
</g>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />
</g>
<circle class="st1" cx="250.4" cy="250.6" r="47.9" />
<rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>
Result on various browsers are:-
The animation works perfectly on google chrome.
Elements are dislocated and Animation is partial on Firefox and safari.
Image is dislocated in IE.
I've to use this svg animation in a website.
Please Help me resolve this issue.
Thanks in advance

Answer 1

Currently what Chrome does is wong per the w3c specifications.
The version below works on Firefox and might work on Chrome if they changed to match the spec. Alternatively the spec might change to match Chrome in which case Firefox would likely change to match Chrome and the specification. Life is tough as the bleeding edge of specification and UA development.
<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" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #A9A9AD;
}
.st1 {
fill: #FEF058;
}
#Circleelement {
transform-origin: center;
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<g transform="translate(-100, -100)">
<svg id="Circleelement" x="100" y="100" width="400" height="400">
<g id="petals">
<g id="petal4" onclick="notify(this,"select");">
<path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
<polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 " />
</g>
<g id="petal3" onclick="notify(this,"select");">
<path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
<polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 " />
</g>
<g id="petal2" onclick="notify(this,"select");">
<path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
<polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 " />
</g>
<g id="petal1" onclick="notify(this,"select");">
<path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
<polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 " />
</g>
</g>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />
</svg>
</g>
<circle class="st1" cx="250.4" cy="250.6" r="47.9" />
<rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>

Answer 2

I fixed the cross platform issue by using GreenSock TweenMax,
var $flower=$('#flower');
TweenMax.to($flower,5,{rotation:360,transformOrigin:"116 116", repeat: -1,ease:Linear.easeNone} );
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<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" viewBox="0 0 700 500" style="enable-background:new 0 0 0 0;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #A9A9AD;
}
.st1 {
fill: #FEF058;
}
</style>
<g id="flower">
<g id="petals">
<g id="petal4" onclick="notify(this,"select");">
<path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
<polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 " />
</g>
<g id="petal3" onclick="notify(this,"select");">
<path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
<polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 " />
</g>
<g id="petal2" onclick="notify(this,"select");">
<path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
<polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 " />
</g>
<g id="petal1" onclick="notify(this,"select");">
<path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
<polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 " />
</g>
</g>
</g>
<circle class="st1" cx="250.4" cy="250.6" r="47.9" />
<rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>