SVG动画问题

Question

无法解决为什么g元素没有动画

#circle{
width:100px;
height:100px;
position:relative;
animation-name:ex2;
animation-duration:4s;
animation-iteration-count:2;
}

@keyframes ex2{
0% {left:0px; top:0px;}
50% {left:200px; top:0px;}
100%{left:0px; top:0px;}
 }

<g id="circle">
  <circle  class="st1" cx="320" cy="567.5" r="136"/>
</g>

我已经尝试了内联以及使用对象标签，但都不起作用。

Answer 1

由于每个人都评论左和上不是g元素的属性。接下来是一个演示，我正在使用css转换。

svg{border:1px solid}

#circle{
animation-name:ex2;
animation-duration:4s;
animation-iteration-count:2;
}

@keyframes ex2{
0% {transform:translate(0px,0px);}
50% {transform:translate(200px,0px);}
100%{transform:translate(0px,0px);}
}

<svg viewBox ="0 400 700 400">
<g id="circle">
  <circle  class="st1" cx="320" cy="567.5" r="136"/>
</g>
</svg>