CSS3 - 移动 SVG 圆答案

【问题标题】：CSS3 - Move SVG CircleCSS3 - 移动 SVG 圆
【发布时间】：2015-02-01 18:21:56
【问题描述】：

我有一个 SVG Circle，我希望它能够使用 CSS3 动画四处移动。基本上此时圆圈向右移动，并希望将其动画移动到左侧。我该怎么办？谢谢。

<svg version="1.1" id="ls_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="82 165.3 449.1 461.3" xml:space="preserve">
<circle id="leftCircle" class="circles" cx="86.3" cy="396.3" r="4.3"/>
</svg>

编辑：忘记示例。 javascript 成功移动了 SVG 项目，但是是即时的而不是动画。

#leftCircle {
  -webkit-transition: width 5s ease-in-out;
  -moz-transition: width 5s ease-in-out;
  -o-transition: width 5s ease-in-out;
  -ms-transition: width 5s ease-in-out;
  transition: width 5s ease-in-out;
}

JS：

$('#leftCircle').attr('cx', '400')

【问题讨论】：

您忘记包含您尝试过的尝试。
我的错误，我可以发誓我复制/粘贴了它。

标签： javascript css svg

【解决方案1】：

你可以结合 animate() 和 step 来实现：

$('#leftCircle').animate(
  {'cx': '400'},
  {step:function(v1){$(this).attr("cx",v1)}}
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="ls_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="82 165.3 449.1 461.3" xml:space="preserve">
<circle id="leftCircle" class="circles" cx="86.3" cy="196.3" r="4.3"/>
</svg>

【讨论】：