SVG-Bewegungspfade: Ein Icon entlang einer Kurve

Verwende animateMotion, um ein SVG-Element entlang einer Route zu bewegen, und platziere darin ein mpath, um auf einen vorhandenen Pfad zu verweisen. rotate="auto" dreht die bewegte Grafik passend zur Richtung der Route. Der lokale Ursprung der Grafik ist der Punkt, der entlang des Pfads wandert. Ein importiertes Icon benötigt deshalb einen bewusst gewählten Ankerpunkt.

Das ist nützlich, wenn ein individueller Pfeil, ein Emblem oder eine kleine Illustration wandern soll, ohne die Form zu ändern. Für eine Linie, die sich scheinbar selbst zeichnet, nutze Konturanimation. Für eine Silhouette, die in eine andere übergeht, nutze Pfad-Morphing. Diese Techniken lösen unterschiedliche visuelle Aufgaben.

Halte Route und Grafik getrennt

Die Route definiert, wohin sich das Icon bewegt. Das Icon definiert, was die Leser sehen. MDNs Referenz zu animateMotion beschreibt das Bewegungselement, während die Referenz zu mpath zeigt, wie du einen Pfad über eine Referenz wiederverwendest.

Das folgende eigene Beispiel enthält einen blaugrünen Pfeil und einen goldenen Punkt. Sein Pfeil zeigt entlang der positiven X-Achse, wodurch sich die Wirkung der automatischen Drehung leicht prüfen lässt. Die Grafik ist um (0, 0) gezeichnet und nicht weit versetzt auf einer großen exportierten Zeichenfläche.

Speichere dies als motion.html und öffne es im Browser. Zuerst erscheint das statische Emblem. Drücke Play, um einen einzelnen Durchlauf von vier Sekunden zu starten; Show static stellt die Ausgangsillustration wieder her.

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

Die sichtbare graue Kurve ist eine separate use-Instanz der Route. Entferne diese use-Instanz, wenn der Pfad unsichtbar sein soll; behalte die Definition in defs, damit die Animation weiterhin darauf verweisen kann. Das Bewegungselement gehört in die Gruppe, deren Pfeil und Punkt sich zusammen bewegen sollen.

fill="freeze" behält den letzten Animationszustand bei. Das hat nichts mit der blaugrünen Füllung des Pfeils zu tun. Dieses Beispiel läuft einmal, wodurch sich seine Endposition leichter prüfen lässt als bei einer Endlosschleife.

Korrigiere ein Icon, das neben der Route schwebt

Die Bewegung wird auf das Koordinatensystem des Elements angewendet. Sie findet nicht automatisch die visuelle Mitte eines Logos. Wenn deine importierten Pfade um die Koordinaten (200, 120) liegen, bleibt dieser Versatz innerhalb der Gruppe bestehen, wenn du die umschließende Gruppe entlang einer Route bewegst.

Wähle den Grafikpunkt, der die Route berühren soll, und verschiebe ihn innerhalb der bewegten Gruppe auf (0, 0). Für einen Anker bei (200, 120) sieht die Struktur so aus:

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

Die innere Verschiebung bereitet die Grafik vor; die äußere Gruppe erhält die Bewegung. Halte diese Aufgaben getrennt, wenn du eine Skalierung oder korrigierende Drehung hinzufügst. Die SVG-Animationsspezifikation definiert Bewegung als zusätzliche Transformation. Vorhandene Transformationen beeinflussen deshalb weiterhin die endgültige Platzierung.

Bei einem Abzeichen kann die Mitte ein sinnvoller Anker sein. Bei einem Fahrzeug möchtest du vielleicht einen Radkontaktpunkt; bei einem Zeiger seine Spitze. Die Mitte des Begrenzungsrahmens ist nur eine erste Vermutung. Prüfe den gewünschten Kontaktpunkt an mehr als einer Position auf der Route.

Eine Drehung ohne Ortsbewegung hat ihr eigenes Drehpunktproblem. Der Leitfaden zu SVG transform-origin erklärt diesen Fall ohne zusätzlichen Bewegungspfad.

Wähle, ob sich die Grafik drehen soll

Diese Werte sind in MDNs Referenz zur Bewegungsdrehung dokumentiert. auto-reverse ändert die Blickrichtung; es kehrt nicht die Reihenfolge um, in der die Route durchlaufen wird.

Wenn deine Quelle nach oben zeigt, weiß auto nicht, dass oben vorwärts bedeutet. Drehe eine innere Grafikgruppe, bis sie entlang der positiven X-Achse zeigt, und wende dann die Bewegung auf die äußere Gruppe an. Drehe nicht die Route selbst, nur um die lokale Ausrichtung des Icons zu korrigieren.

Spitze Routenecken können abrupte Richtungswechsel verursachen. Eine gekrümmte Route ist ein besserer Ausgangspunkt, wenn du eine sichtbar sanfte Drehung möchtest. Lasse außerdem Platz um die Route: Ein Icon kann über die Pfadmittellinie hinausreichen und am SVG-Viewport-Rand beschnitten werden.

Prüfe Start, Mitte und Ende

Wir öffneten dieselbe Route und dasselbe Emblem in Chrome und verwendeten eine kleine Testumgebung, um die SVG-Zeitleiste bei 0, 2 und 4 Sekunden anzuhalten. Das Icon begann unten links, bewegte sich nahe am Scheitelpunkt vorbei und endete unten rechts. Mit auto änderte sich seine Ausrichtung entlang der Kurve. Mit Drehung 0 blieb die Position zur halben Zeit unverändert, während der Pfeil horizontal blieb.

Diese Prüfung deckt dieses Testbeispiel in einem Browser ab. Sie ist kein Animationsimporttest für Designwerkzeuge und keine Garantie für jeden Browser-Einbettungsmodus.

Für deine eigene Grafik:

1. Prüfe den Kontaktpunkt am Routenstart. Korrigiere Quellversätze, bevor du das Timing anpasst.
2. Pausiere nahe Kurven und bestätige, dass der gewünschte Teil des Emblems der Linie folgt.
3. Vergleiche automatische und feste Drehung. Wähle anhand der Grafik, besonders wenn sie Text enthält.
4. Prüfe die Endposition auf Beschneidung und bestätige, dass die Wiederholung korrekt startet.
5. Teste den tatsächlichen Ausgabekontext. Dieses Beispiel verwendet Inline-SVG in einer HTML-Seite mit JavaScript-Steuerung.

animateMotion verwendet standardmäßig eine Bewegung mit gleichmäßiger Geschwindigkeit, wie MDN dokumentiert. Die halbe Dauer entspricht deshalb ungefähr der halben zurückgelegten Strecke, nicht zwangsläufig dem halben Kurvenparameter zwischen den Kontrollpunkten. Die Zwei-Sekunden-Position unserer asymmetrischen kubischen Route lag leicht rechts von ihrem geometrischen Scheitelpunkt.

Biete eine nützliche statische Version

Das Beispiel beginnt mit einer statischen use-Instanz des Emblems, und die Bewegung startet erst nach Betätigung der Play-Schaltfläche. Wenn JavaScript nicht ausgeführt wird, bleibt die statische Grafik sichtbar. Ist die Präferenz für reduzierte Bewegung aktiv, belässt der Handler sie in diesem Zustand.

Die Medienfunktion prefers-reduced-motion erlaubt der Seite, auf die Bewegungspräferenz des Nutzers zu reagieren. Hier liest JavaScript diese Präferenz vor dem Start der SVG-Bewegung und stellt die statische Version wieder her, wenn sich die Präferenz ändert.

Wir testeten den statischen Zweig außerdem mit einem ausdrücklichen Vorschau-Umschalter für reduzierte Bewegung in der Testumgebung: Er blendete die animierte Gruppe aus und zeigte das Emblem am Startort. Dieser Umschalter prüfte unsere Ausweichlogik; er änderte nicht die Barrierefreiheitseinstellung des Computers.

Halte die Bedeutung möglichst außerhalb der Animation. Nutzer sollten kein bewegtes Emblem beobachten müssen, um einen Status zu erfahren oder wichtige Anweisungen zu lesen. Passe bei einem dekorativen Icon neben bereits aussagekräftigem Text die Beschriftung für assistive Technologien an, damit derselbe Inhalt nicht doppelt vorgelesen wird.

Bereite dein eigenes Motiv vor der Animation vor

Wenn dein individuelles Motiv nur als PNG oder JPG existiert, kann PerfectVector vor der Bewegungskonstruktion helfen, bearbeitbare SVG-Grafiken zu rekonstruieren. Prüfe die rekonstruierte Silhouette und kleine Öffnungen, gruppiere die Teile, die gemeinsam wandern sollen, und wähle den Ankerpunkt. PerfectVector liefert Quellgeometrie; Route, Timing und Bewegungsverhalten werden separat erstellt.

Ein vorhandenes SVG kann direkt zur Gruppierung und Ankervorbereitung übergehen. Für einfache Pfeile wie in dieser Demonstration ist auch das direkte Zeichnen der Geometrie praktikabel. Der Überblick zur Bildvektorisierung erklärt, wann das Nachzeichnen einer Rasterquelle nützlich ist.

Bei einem individuellen Zeichen, das nur als Rasterbild vorliegt, probiere dein Bild in PerfectVector aus, prüfe Konturen und kleine Details und teste dann dieses SVG am Start, in der Mitte und am Ende deiner Route. Behalte eine statische Version neben der animierten.

FAQ

Warum bewegt sich mein Icon neben dem Pfad statt darauf? Die Grafik kann gegenüber ihrem lokalen Ursprung versetzt sein. Wähle den Punkt, der der Route folgen soll, und verschiebe ihn innerhalb der bewegten Gruppe auf null. Prüfe das Ergebnis am Start und an einer Kurve.

Verändert die automatische Drehung die Form des Icons? Nein. Bewegung verändert Platzierung und Ausrichtung der Grafik. Sie morpht nicht ihre Pfadgeometrie. Für die automatische Drehung dieses Beispiels sollte die Vorwärtsrichtung der Quelle entlang der positiven X-Achse zeigen.

Kann ich die sichtbare Hilfslinie entfernen? Ja. Behalte Routendefinition und ID, entferne aber das separate Element, das die Hilfslinie zeichnet. Die Bewegung kann weiterhin über mpath auf den Pfad verweisen.

Quellen

1. MDN animateMotion — Beschreibt Bewegungspfade, Drehwerte und die standardmäßig gleichmäßige Bewegung.
2. MDN mpath — Erklärt das Referenzieren einer vorhandenen Route innerhalb des Bewegungselements.
3. SVG-Animationsspezifikation — Definiert Bewegungstransformationen und deren Beziehung zu Grafikkoordinaten.
4. MDN rotate-Attribut — Dokumentiert feste, automatische und entgegengesetzt ausgerichtete Bewegungsorientierung.
5. MDN Präferenz für reduzierte Bewegung — Erklärt die Erkennung der Bewegungspräferenz des Nutzers.