SVG-Konturanimation: Einen Zeichenweg vorbereiten

Eine SVG-Konturanimation kann eine Linie sichtbar machen, indem ein Strich entlang ihres Pfads verschoben wird. Verwende stroke-dasharray, um Strich und Lücke zu definieren, und animiere dann stroke-dashoffset, bis die Kontur sichtbar ist. MDN dokumentiert diese als Eigenschaften zur Konturdarstellung.

Der Quellpfad bestimmt, was scheinbar gezeichnet wird. Ein offener Pfad kann einem Stiftweg durch die Mitte eines Zeichens folgen. Ein gefüllter Umriss beschreibt dessen Grenze. Wenn du diesem Umriss eine Kontur hinzufügst, läuft die Animation um seine Kanten; Stricheinstellungen allein blenden seine Füllung nicht schrittweise ein.

Beginne mit einer kleinen Form, bevor du das Timing eines vollständigen Logos festlegst. Die folgenden von Hand erstellten Beispiele trennen Zeichenweg, gefüllte Grafik und Umfang, damit du die Geometrie wählen kannst, die deine Animation benötigt.

Um ein ganzes Icon entlang einer Kurve zu bewegen, verwende den SVG-Bewegungspfadworkflow, der Bewegungsroute und Grafik getrennt hält.

Beginne mit einem offenen Pfad mit Kontur

Dieser eigene Pfad läuft nach rechts und dann nach oben. Seine Füllung (fill) ist deaktiviert, deshalb stammt das sichtbare Zeichen vollständig aus seiner Kontur:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

Verwende dieses CSS für ein Einzeichnen über zwei Sekunden:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" kalibriert distanzbasierte Operationen auf eine festgelegte Länge von 100. Die pathLength-Referenz beschreibt diese Normalisierung. Ein einzelner dash-array-Wert wiederholt sich als Strich und Lücke, daher liefert 100 einen Strich über die gesamte Länge, gefolgt von einer ebenso langen Lücke. Das Versetzen dieses Musters um 100 verbirgt in diesem Beispiel die Kontur; das Verschieben des Offsets auf null macht sie sichtbar.

Verwende hier einheitenlose Zahlen. stroke-dashoffset: 100% ist kein Ersatz für 100 normalisierte Pfadeinheiten. MDNs Referenz zum Strichversatz erklärt, dass Prozentwerte die normalisierte Diagonale des SVG-Viewports verwenden statt der gesamten Pfadlänge.

Das Beispiel verwendet gerade Linienenden, damit der pausierte Start leichter zu prüfen ist. Andere Endstile können das Aussehen der Strichenden verändern. Wähle die Linienenden passend zur Grafik und prüfe dann Anfangs- und Endbild in der Größe, in der das Icon tatsächlich erscheint. Vergleiche für dekorative Wiederholungen gepunktete Umrisse und Abstände der Linienenden, bevor du Strich- und Lückenlängen wählst.

Vergleiche den Zeichenweg mit einem gefüllten Umriss

Ein dicker abgewinkelter Streifen kann ähnlich wie diese Konturlinie aussehen und trotzdem andere Geometrie enthalten. Dieser zweite von Hand erstellte Pfad läuft um die Grenze des Streifens und schließt mit Z:

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

Mit den folgenden Farbeinstellungen hat das Ändern des Strichversatzes keinen sichtbaren Effekt:

.filled {
  fill: #ef8067;
  stroke: none;
}

Der Streifen bleibt gefüllt, weil keine Kontur vorhanden ist, die gestrichelt werden könnte. Die SVG-Zeichenspezifikation des W3C unterscheidet das Bemalen des Forminneren vom Zeichnen ihrer Kontur.

Wenn du stattdessen fill: none setzt, eine Kontur hinzufügst und diesen geschlossenen Pfad animierst, folgt die Kontur dem Umfang: entlang einer Kante, über ein Ende und zurück entlang der anderen Kante. Daraus wird kein einzelner Weg durch die Streifenmitte.

Dieser Unterschied erklärt auch, warum eine Nachzeichnung doppelte Schnittlinien erzeugen kann. Bei einer Animation kann das unerwünschte Ergebnis eine Linie sein, die außen um einen Stiftstrich läuft. Wenn der gewünschte Effekt einen mittigen Weg benötigt, nutze den Leitfaden zu einlinigen SVGs, um diese Geometrie zu prüfen oder vorzubereiten.

Prüfe Start, Mitte und Ende

Deaktiviere zur pausierten Prüfung des Beispiels die Animation und setze stroke-dashoffset auf 100, 50 und 0. Diese Werte entsprechen bei diesem normalisierten Pfad dem Start, dem halb sichtbaren Zustand und dem Endzustand. Es sind keine Prozentwerte, die in die CSS-Eigenschaft eingegeben werden.

Behalte alle drei Versionen auf einer kleinen Testseite mit Schaltflächen für diese Zustände. Die mittlere Einstellung ist besonders nützlich: Die fertigen Formen können ähnlich aussehen, während ihre Zeichenwege während des Einzeichnens offensichtlich werden.

Wir prüften diese von Hand erstellten Pfade im Browser bei Offsets 100, 50 und 0 und führten die Zwei-Sekunden-Animation einmal aus. Der gefüllte Streifen blieb sichtbar, während Weg und Umfang unterschiedlich erschienen. Dieser Test demonstriert diese eigenen Pfade; er ist keine PerfectVector-Nachzeichnung und kein Test über alle Browser hinweg.

Prüfe Farbeinstellungen und berechnete Stile des tatsächlichen Elements, wenn ein Ergebnis abweicht. Eine CSS-Regel kann ein Präsentationsattribut überschreiben, und ein Pfad ohne sichtbare Kontur kann kein strichbasiertes Einzeichnen demonstrieren. Die Checkliste für fehlende Konturen hilft, Farb- und Anzeigeprobleme einzugrenzen, bevor du das Animationstiming anpasst.

Entscheide Startpunkt und Pfadreihenfolge

Der erste Pfad beginnt bei M30 90, läuft horizontal bis x=100 und dann vertikal bis y=30. Diese Folge gibt dem Einzeichnen eine Richtung. Wenn die Zeichnung am oberen Ende beginnen soll, bereite den Pfad in dieser Richtung vor, statt anzunehmen, dass die Animation die gewünschte Stiftbewegung kennt.

Entscheide bei einem Logo mit separaten Zeichen, welcher Pfad zuerst und welcher danach erscheinen soll. Dieselbe Animation auf jedem Pfad erzeugt gleichzeitiges Einzeichnen. Eine Sequenz benötigt explizit festgelegte Verzögerungen oder eine andere Zeitleistenanordnung. Prüfe Kreuzungen und Überlappungen in pausierten Zuständen, weil spätere Formen eine noch entstehende Kontur verdecken können.

Eine Zeichnung aus mehreren getrennten Unterpfaden muss für brauchbare Timingsteuerung möglicherweise in einzelne Elemente aufgeteilt werden. Halte visuelles Design und Entscheidungen über den Animationsweg auseinander. Das Verbinden unabhängiger Teile nur für einen einzigen Pfad kann eine Verbindung einführen, die der Künstler nie beabsichtigt hat.

Eine Animationsbibliothek kann die Sequenz steuern, aber ihre Eingabe benötigt weiterhin die richtige Geometrie. Motions Dokumentation zur SVG-Animation bietet Linienzeichnen über seinen animierten Wert pathLength. Diese Bibliothekssteuerung ist eine separate API gegenüber der hier verwendeten nativen SVG-Kalibrierung pathLength="100"; kopiere die Werte eines Beispiels nicht ohne API-Prüfung in das andere.

Halte die vollständige Grafik ohne Bewegung verfügbar

Das CSS-Beispiel verwendet standardmäßig Offset null und ändert ihn nur während der Animation. Seine Medienabfrage für reduzierte Bewegung deaktiviert das Einzeichnen und zeigt die vollständige Linie. MDNs Leitfaden zu prefers-reduced-motion erklärt, wie die Abfrage die Nutzerpräferenz erkennt.

Biete für eine interaktive Demo neben einer Wiederholungsschaltfläche auch eine Steuerung für das statische Ergebnis. Behalte bei einem Oberflächenicon die sichtbare Textbeschriftung oder den für assistive Technologien zugänglichen Namen, der die Aktion erklärt. Die Animation sollte nicht der einzige Weg sein, die Bedeutung der Grafik zu verstehen.

Teste Anfangs-, unterbrochenen und Endzustand in der tatsächlichen Platzierung. Wenn ein wichtiges Icon unsichtbar bleibt, wenn die Animation nicht läuft, korrigiere den Basisstil, bevor du den Effekt auf die gesamte Oberfläche ausweitest. Eine erfolgreiche isolierte Demo belegt nicht jedes Browser-, Assistenztechnologie- oder Leistungsergebnis.

Bereite Rastergrafiken vor, ohne einen Stiftweg zu versprechen

Wenn das Vektororiginal fehlt und du eine flächige PNG- oder JPG-Grafik als bearbeitbare Vektorgrafik benötigst, kann PerfectVectors Bild-zu-Vektor-Workflow einen SVG-Kandidaten vorbereiten. Vergleiche Silhouette, Löcher und separate Bereiche mit der Quelle und prüfe dann die heruntergeladenen Pfade im Editor. Verwende diese Geometrie als zu prüfende Grafik, bevor du die Animation planst.

Vektorisierung bestimmt weder die ursprüngliche Stiftreihenfolge noch erzeugt sie deine Zeitleiste oder garantiert einzelne Mittellinienpfade. Wenn das Einzeichnen einen Weg durch einen Strich benötigt, zeichne oder bereite diesen Weg bewusst vor. Behalte ein vorhandenes Vektororiginal. Ein SVG, das nur ein Rasterbild einbettet, benötigt ebenfalls die Prüfung auf eingebettete Bilder, bevor du annimmst, dass sein sichtbares Zeichen bearbeitbare Pfadgeometrie ist.

Nimm zuerst die statische Grafik ab, dann die Einzeichensequenz. Die Bearbeitungsleitfäden des Blogs behandeln Quellbereinigung vor der Animationsebene.

FAQ

Warum bleibt mein SVG am Anfang einer Konturanimation sichtbar? Prüfe, ob der sichtbare Teil eine Füllung ist. Dash-array- und dash-offset-Einstellungen beeinflussen die Kontur, deshalb kann ein gefüllter Bereich sichtbar bleiben, während seine Kontur verborgen ist.

Warum zeichnet die Animation beide Seiten einer Linie entlang? Der Pfad beschreibt möglicherweise einen geschlossenen Umriss um ein dickes Zeichen. Eine Kontur auf diesem Pfad folgt seinem Umfang. Bereite einen offenen Zeichenweg vor, wenn der Effekt eine einzelne Linie durch die Mitte benötigt.

Kann ich 100% für die gesamte Pfadlänge verwenden? Nicht als allgemeinen Ersatz in stroke-dashoffset. Dessen Prozentwerte beziehen sich auf die normalisierte Viewport-Diagonale. Das Beispiel verwendet natives pathLength="100" mit einheitenlosen Strichwerten.

Macht die Konvertierung von PNG zu SVG es bereit für eine Handschriftanimation? Aus Vektorisierung folgt keine automatische Garantie für Stiftreihenfolge oder Mittellinien. Prüfe die entstandene Geometrie und bereite Zeichenpfade und Timing separat vor.

Quellen

1. MDN — stroke-dasharray — Definiert abwechselnde Strich- und Lückenlängen für die Konturdarstellung.
2. MDN — stroke-dashoffset — Erklärt Musterversatz und die Referenz für Prozentwerte.
3. MDN — pathLength — Dokumentiert native Abstandskalibrierung für Pfade und Konturen.
4. W3C — SVG-Zeichendarstellung — Unterscheidet Füllungs- und Konturverhalten.
5. MDN — prefers-reduced-motion — Dokumentiert die Nutzerpräferenz für ein statisches Ergebnis.
6. Motion — SVG-Animation — Beschreibt die separate Linienzeichnungs-API der Bibliothek.

Teste einen Weg am Start, zur halben Zeit und am Ende, bevor du die gesamte Grafik sequenzierst. Wenn deine Quelle ein Rasterzeichen ist, bereite einen bearbeitbaren SVG-Kandidaten vor, prüfe seine Geometrie und plane den Zeichenweg separat.