[英]CSS3 - Move SVG Circle
我有一个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')
您可以结合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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.