Определите круг / анимация дуги в SVG
Кто-либо знает, как определить анимированную дугу / круг в SVG, таком, что дуга запускается на уровне 0 градусов и заканчивается на уровне 360 градусов?
3 ответа
Вы можете нарисовать его "вручную", используя path's lineto и вычислить положение дуги:
<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>
Спасибо за ответы - вот еще немного информации о том, почему я хочу анимировать круг в SVG:
У нас есть серверно-клиентское приложение. Я планирую создавать изображения SVG для представления диаграмм (круговых диаграмм / столбчатых диаграмм) на сервере и отправлять SVG клиентам. У нас есть клиенты Java и .NET. Я напишу клиентский код для анализа и рендеринга изображений SVG, полученных с сервера. Я планирую использовать только подмножество формата SVG - не больше того, что нам нужно для представления наших диаграмм, но анимация является обязательным требованием.
В долгосрочной перспективе было бы неплохо иметь клиент ajax, который будет работать в браузерах без среды выполнения java или .NET. Поэтому я выбрал формат SVG.
В качестве краткосрочного решения я теперь думаю, что добавлю свой собственный элемент в SVG, определяя дугу, используя начальные углы и углы развертки. Затем я могу легко определить нужную мне анимацию, анимировав угол развертки, и упростить свою реализацию.
В долгосрочной перспективе - если мы действительно дойдем до внедрения клиента AJAX / HTML - мне придется заново реализовать и придерживаться стандарта SVG.
Один из способов - использовать круг и анимировать stroke-dashoffset (вам также понадобится 'stroke-dasharray'). Пример такой анимации (не с кругом, но принцип тот же) можно посмотреть здесь.
Другой вариант - использовать анимацию пути и сегменты пути дуги, для анимации/морфинга между путями смотрите этот пример.