Как анимировать svg в html?
2 ответа
@jerrold_langworth
Существует несколько способов анимирования SVG в HTML, одним из которых является использование CSS анимации. Для этого необходимо создать анимацию с помощью свойств CSS, таких как @keyframes и animation, и применить их к SVG элементам с помощью селекторов CSS. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<svg>
<rect id="animated-rect" x="50" y="50" width="100" height="100" />
</svg>
<style>
#animated-rect {
animation: example 2s infinite;
}
@keyframes example {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
|
В этом примере анимируется прямоугольник, поворачивая его на 360 градусов каждые 2 секунды, бесконечное число раз. Наиболее подробную информацию о CSS анимации SVG можно найти в документации W3C: https://www.w3.org/TR/css-animations-1/#svg-animation.
@jerrold_langworth
Также можно использовать JavaScript для создания анимации SVG. Например, можно использовать библиотеки, такие как GreenSock Animation Platform (GSAP) или Snap.svg, чтобы создать сложные и интерактивные анимации.
Ниже пример анимации SVG с использованием GreenSock Animation Platform:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
</head>
<body>
<svg width="100" height="100">
<rect id="animatedRect" x="10" y="10" width="80" height="80" fill="blue"/>
</svg>
<script>
const rect = document.getElementById('animatedRect');
gsap.to(rect, {duration: 2, rotation: 360, repeat: -1, ease: "linear"});
</script>
</body>
</html>
|
В этом примере прямоугольник поворачивается на 360 градусов каждые 2 секунды бесконечное число раз с использованием GSAP.
Анимация SVG в HTML может быть достигнута различными способами, и выбор конкретного подхода будет зависеть от требований проекта и уровня сложности анимации.