Анимация круговой границы с помощью Skrollr.js

Question

В настоящее время я работаю с skrollr.js над новостной статьей. У меня есть один круговой элемент div (border-radius: 50%), и я хочу использовать опцию path для skrollr.js, чтобы анимировать границу, чтобы она обводила div другим цветом.

Тем не менее, я попытался найти простое руководство о том, как использовать этот SVG-путь, и кроме этого примера GitHub не так много, который мало чем помогает.

Поэтому мне интересно, есть ли простой способ просто нарисовать идеальный круг с указанным радиусом, используя тег SVG path?

Answer 1

Это можно легко сделать, используя свойства stroke-dasharray и stroke-dashoffset SVG-пути. Их можно изменить с помощью библиотеки skrollr.js, как и любого другого свойства css, такого как margin и т. Д. Это хорошо объясняется в следующем примере: http://jakearchibald.com/2013/animated-line-drawing-svg/ Надеюсь, это поможет.:)