Animowanie SVG za pomocą CSS i SMIL

Atrybuty prezentacyjne SVG (fill, stroke, opacity, transform) można animować za pomocą przejść CSS. Dodaj klasę i zdefiniuj przejście: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. Przejścia CSS działają na elementach SVG tak samo jak na elementach HTML.

Do elementów SVG można stosować @keyframes: animate stroke-dashoffset, aby uzyskać efekt rysowania ścieżki, opacity, aby uzyskać płynne pojawianie się, oraz transform, aby uzyskać ruch i obrót. Ta sama składnia animacji, która jest używana dla elementów HTML, działa na elementach SVG bez modyfikacji.

Technika stroke-dasharray i stroke-dashoffset symuluje rysowanie ścieżki: ustaw dasharray na długość ścieżki, ustaw dashoffset na długość ścieżki (ścieżka jest wtedy niewidoczna), a następnie animuj dashoffset do wartości 0. Obrys sprawia wrażenie, jakby był rysowany od początku do końca.

path.getTotalLength() zwraca długość ścieżki w jednostkach użytkownika SVG. Tej wartości należy użyć zarówno dla stroke-dasharray, jak i początkowego stroke-dashoffset. Dzięki temu animacja działa prawidłowo niezależnie od złożoności i długości ścieżki.

Nowoczesne przeglądarki obsługują CSS transform na elementach SVG. W elementach SVG transform-origin domyślnie wskazuje lewy górny róg SVG, a nie środek elementu, jak w HTML. Ustaw transform-box: fill-box, aby transform-origin odnosił się do obwiedni elementu.

SMIL (Synchronized Multimedia Integration Language) to wbudowany system animacji SVG. Element animate zmienia wartości atrybutów w czasie. SMIL nie wymaga JavaScriptu ani CSS — animacje są w pełni deklaratywne i zapisane w znacznikach SVG.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> obraca element wokół określonego punktu środkowego za pomocą składni SMIL.

<animateMotion> przesuwa element wzdłuż ścieżki SVG. Ścieżkę można wskazać za pomocą mpath lub podać jej dane bezpośrednio. Element automatycznie podąża po krzywej ścieżki — jest to przydatne przy złożonych torach ruchu, gdy ręczne obliczanie współrzędnych byłoby uciążliwe.

Animacje CSS są obsługiwane we wszystkich nowoczesnych przeglądarkach, są zintegrowane z kaskadą CSS i łatwiejsze do kontrolowania za pomocą JavaScriptu (wstrzymywanie, odwracanie). SMIL jest samodzielnie zapisany w znacznikach SVG, działa w statycznych plikach SVG bez dostępu do CSS oraz zapewnia deklaratywną i wyrazistą składnię animacji podążającej po ścieżce.

Animowanie między dwoma kształtami ścieżek wymaga, aby ścieżki miały taką samą liczbę poleceń i zgodną strukturę. Animacja CSS animuje właściwość d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } umożliwia natywną interpolację ścieżek za pomocą CSS.

Dodaj zapytanie medialne prefers-reduced-motion, aby wyłączać lub upraszczać animacje SVG dla użytkowników, którym ruch sprawia dyskomfort. Animacje dekoracyjne należy całkowicie wyłączać, a animacje znaczące (takie jak stany ładowania) upraszczać zamiast zatrzymywać.

W jaki sposób technika stroke-dasharray i stroke-dashoffset tworzy animację rysowania ścieżki?

Animacje SVG wykorzystują przejścia CSS i klatki kluczowe do uzyskiwania efektów opartych na właściwościach, technikę stroke-dasharray/dashoffset do rysowania ścieżek, a elementy SMIL animate/animateTransform/animateMotion do deklaratywnych animacji zapisanych w SVG oraz prefers-reduced-motion na potrzeby dostępności. CSS i SMIL wzajemnie się uzupełniają — należy wybrać rozwiązanie zależnie od tego, czy SVG wymaga integracji z kaskadą CSS, czy możliwości działania jako samodzielny plik.