在 SVG 中定义圆/弧动画 [英] Define a circle / arc animation in SVG
本文介绍了在 SVG 中定义圆/弧动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有谁知道如何在 SVG 中定义动画圆弧/圆,使圆弧从 0 度开始,到 360 度结束?
Does anyone know how to define an animated arc / circle in SVG, such that the arc starts at 0 degrees and ends at 360 degrees?
推荐答案
你可以使用path的lineto手工"绘制它并计算圆弧的位置:
you can paint it "by hand" using path's lineto and calculate the position of the arc:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 1200 800"
preserveAspectRatio="xMidYMid"
style="width:100%; height:100%; position:absolute; top:0; left:0;"
onload="drawCircle();">
<script>
function drawCircle() {
var i = 0;
var circle = document.getElementById("arc");
var angle = 0;
var radius = 100;
window.timer = window.setInterval(
function() {
angle -=5;
angle %= 360;
var radians= (angle/180) * Math.PI;
var x = 200 + Math.cos(radians) * radius;
var y = 200 + Math.sin(radians) * radius;
var e = circle.getAttribute("d");
if(i==0) {
var d = e+ " M "+x + " " + y;
}
else {
var d = e+ " L "+x + " " + y;
}
if (angle === -5 && i !== 0) {
window.clearInterval(window.timer);
}
circle.setAttribute("d", d);
i++;
}
,10)
}
</script>
<path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>
http://jsfiddle.net/k99jy/138/
这篇关于在 SVG 中定义圆/弧动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文