Руководство для начинающих о том, как анимировать круг SVG.
Прежде чем мы начнем, я хочу признать, что я новичок в SVG (масштабируемой векторной графике). В результате я провел много исследований о том, как работает SVG. Наконец-то у меня появилось базовое понимание этого. Итак, вкратце, эта статья представляет собой руководство для начинающих для тех, кто интересуется SVG <circle>.
Создание круга SVG
Первый вопрос: Как построить круг? Начнем с простой математики! Длина окружности = 2*ПИ*радиус.
Формула: C = 2 × π × r
<svg>
<circle cx="100" cy="100" r="75" />
</svg>Если вы скопируете и вставите код в codepen.io, вы получите неполный круг. Почему? Когда вы проверите элемент <circle>, вы узнаете ответ.
Является ли координата оси Y (cy) проблемой?
В качестве решения мы можем изменить значение cy на 75, чтобы центрировать элемент <circle> по оси Y. Точно так же для значения cx разделите 300 на 2.
Код, как показано ниже:
<svg> <circle cx="150" cy="75" r="75" /> </svg>
Центрировать SVG
Следующий шаг является необязательным. Если вы хотите центрировать свой SVG на веб-странице, вы можете следовать приведенному ниже коду:
svg {
background: #ffece3;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Анимируйте это
Я планирую анимировать круг по часовой стрелке. Итак, я добавляю свойство CSS stroke-width к 10px.
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
}
Ой! Элементу <circle> не хватает места. Увеличим «пространство». Итак, добавьте около 400 пикселей для свойств CSS width и height к элементу SVG. И ваш элемент <circle> снова не размещался в центре веб-страницы.
Затем вам нужно снова отрегулировать его, разделив значение ширины и высоты на 2 или используя значение процентов (%), чтобы указать координаты по осям X и Y. .
<svg> <circle cx="50%" cy="50%" r="75" /> </svg>
Далее нам нужно знать свойства stroke-dasharray и stroke-dashoffsetCSS для анимации.
Свойство stroke-dasharray в CSS предназначено для создания тире в обводке фигур SVG. Из CSS-Trick.
Как узнать stroke-dasharray <circle> элементов?
Существует формула для вычисления свойства stroke-dasharray элемента <circle>. Я нашел решения здесь!
Для элемента <circle> свойство stroke-dasharray представляет длину окружности.
Итак, мы можем получить максимальноезначение свойства stroke-dasharray. Чем ниже значение, тем больше расстояние между дефисами в штрихе для элемента <circle>.
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
stroke-dasharray: 471;
}
Свойство stroke-dashoffset в CSS определяет место на пути SVG, где начинается тире stroke. Из CSS-Trick.
Я играл со свойством stroke-dashoffset с разными значениями. Вот результаты:
Если вы поместите то же значение со значением stroke-dasharray, вы получите пустой кружок. Итак, мы собираемся анимировать свойство stroke-dashoffset. Теперь мы можем объявить анимацию для элемента <circle>.
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
stroke-dasharray: 471;
stroke-dashoffset: 471;
animation: clock-animation 10s linear infinite;
}
@keyframes clock-animation {
0% {
stroke-dashoffset: 471;
}
100% {
stroke-dashoffset: 0;
}
}
Вопрос: начальная точка анимации справа от круга? Как сделать так, чтобы начальная точка начиналась сверху?
Решения. Поверните круг на -90 градусов. И не забудьте добавить свойство transform-origin в center.
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
stroke-dasharray: 471;
stroke-dashoffset: 471;
animation: clock-animation 10s linear infinite;
transform: rotate(-90deg);
transform-origin: center;
}
Вы также можете изменить направление на против часовой стрелки. Просто измените код анимации.
@keyframes anti-clock-animation { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 471; } }
Дополнительные возможности:
А если вы хотите, чтобы анимировался полный круг, просто увеличьте значение stroke-width. Допустим, радиус круга равен 75, затем удвойте значение, равное 150px.
Заключение
Надеюсь, вам понравится это руководство по SVG. Спасибо за чтение! Здесь я прикрепил исходный код.
Удачного кодирования!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
