CSS Motion Path z SVG: praktyczny poradnik

CSS Motion Path z SVG

CSS Motion Path pozwala przesuwac element po zdefiniowanej trasie. W pracy z SVG oznacza to, ze krzywa, linia albo trasa z projektu moze stac sie animacja w przegladarce.

Najwazniejsze punkty

offset-path definiuje trase.
offset-distance steruje postepem na trasie.
Dane sciezki SVG mozna wykorzystac w CSS path().
W ukladach responsywnych trzeba sprawdzic dopasowanie trasy.
prefers-reduced-motion to podstawowa praktyka UX.

Prosty przyklad

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

Wartosc path() uzywa skladni SVG, dlatego Motion Path dobrze pasuje do ikon, map, ilustracji produktu i wizualizacji danych.

Kiedy uzywac

Dobrymi przypadkami sa przewodniki po produkcie, znaczniki na wykresach, trasy dostawy, ikony poruszajace sie po krzywej i wskazniki postepu. Najpierw wyodrebnij trase w SVG Path Extractor, sprawdz plik w SVG Viewer, a potem zoptymalizuj go w SVG Optimizer.

Wzor HTML i CSS

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

@keyframes move-dot {
  to {
    offset-distance: 100%;
  }
}

offset-rotate: auto obraca element zgodnie z kierunkiem sciezki. Dobrze dziala dla strzalek, ale nie dla etykiet tekstowych.

Responsywnosc i dostepnosc

CSS path() nie skaluje sie automatycznie tak jak SVG viewBox. Utrzymuj stabilny obszar animacji, uzywaj wspolnych wspolrzednych z projektem i testuj kilka szerokosci ekranu.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

Ruch ma pomagac, a nie zaslaniac tresc. Nie opieraj stanu tylko na animacji i nie pozwalaj, aby marker przykrywal przyciski lub formularze.

Workflow SVGView

Otworz SVG w SVG Viewer i sprawdz viewBox.
Wyodrebnij trase w SVG Path Extractor.
Oczysc zewnetrzne SVG w SVG Sanitizer.
Sformatuj kod w SVG Formatter.
Zoptymalizuj w SVG Optimizer i przetestuj ponownie.

Wniosek

CSS Motion Path zamienia sciezki SVG w czytelny i latwy w utrzymaniu ruch interfejsu. Zacznij od prostej trasy, nadaj animacji jasny cel i sprawdz dostepnosc przed publikacja.

CSS Motion Path z SVG: praktyczny poradnik