我有一个 SVG 圆,我希望能够使用 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')
最佳答案
您可以结合 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>
关于javascript - CSS3 - 移动 SVG 圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28257909/