我正在尝试使用简单的svg图像制作动画 我有4个花瓣（多边形），圆形和矩形。我想围绕圆圈旋转花瓣，
我的代码如下
<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>
各种浏览器的结果是： -
动画在Google Chrome上完美运行。 元素是错位的，动画在Firefox和Safari上是部分的。 图像在IE中脱臼。
我要在网站上使用这个svg动画。 请帮我解决这个问题。 提前致谢
答案 0 :(得分：0)
目前Chrome根据w3c specifications执行的操作是什么。
以下版本适用于Firefox，如果更改为符合规范，则可能适用于Chrome。或者，规范可能会更改以匹配Chrome，在这种情况下，Firefox可能会更改以匹配Chrome和规范。作为规范和UA发展的最前沿，生活是艰难的。
<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>
答案 1 :(得分：0)
我使用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>