SVG动画问题答案

【问题标题】：SVG animation issueSVG动画问题
【发布时间】：2019-03-13 12:32:45
【问题描述】：

无法弄清楚为什么 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>

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

【问题讨论】：

它不在svg中，circle末尾有一个挥之不去的孤儿标签，定位，缺少供应商前缀，从哪里开始？
你只是想让一些东西在 x 轴上反弹几次？
left 和 top 不是元素支持的属性（或者实际上除了外部

标签： animation svg

【解决方案1】：

正如大家评论的那样，left 和 top 不是 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>

【讨论】：