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>