搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
SVG 教程
SVG 教程
源代码
清空
点击运行
<svg width="500" height="100"> <circle id="circle1" cx="20" cy="20" r="10" style="stroke: none; fill: #ff0000;"/> </svg> <script> var timerFunction = null; function startAnimation() { if(timerFunction == null) { timerFunction = setInterval(animate, 20); } } function stopAnimation() { if(timerFunction != null){ clearInterval(timerFunction); timerFunction = null; } } function animate() { var circle = document.getElementById("circle1"); var x = circle.getAttribute("cx"); var newX = 2 + parseInt(x); if(newX > 500) { newX = 20; } circle.setAttribute("cx", newX); } </script> <br/> <input type="button" value="开始动画" onclick="startAnimation();"> <input type="button" value="停止动画" onclick="stopAnimation();">
运行结果
