Sich selbst zeichnende Formen

Es wirkt fast wie Magie, wenn man beobachtet, wie sich eine Form im Web von selbst zeichnet. Oder als wäre es wahrscheinlich ein eingebettetes Video. Aber das muss es nicht sein! Tatsächlich können wir dies mit bemerkenswert wenig Code und einer äußerst cleveren Technik, die Strich-Linien (Dashes) und Offsets nutzt, auf jedem SVG-Pfad umsetzen.

Das beste Werkzeug zum Zeichnen von Formen, das wir im Web haben, ist SVG, insbesondere das <path d="" /> Element. Mit der Pfad-Syntax und ihren Befehlen zum Zeichnen von geraden und geschwungenen Linien können Sie alles zeichnen, was Sie wollen. Ein Pfad kann eine ausgefüllte Form sein, aber für unsere Zwecke hier nehmen wir an, dass der Pfad fill: none; hat, und wir konzentrieren uns auf den stroke (Kontur) des Pfads und darauf, diesen Pfad sich selbst zeichnen zu lassen.

Nehmen wir an, wir haben einen einzelnen <path />, der eine coole Form wie diese zeichnet

In unserem SVG stellen wir sicher, dass wir diesen Pfad ordentlich wie folgt eingerichtet haben

<path 
  pathLength="1" 
  stroke="black"
  stroke-width="5"
  fill="none"
  d="..."
/>

Diese zweite Zeile wird diesen Trick sehr einfach umsetzbar machen, wie Sie gleich sehen werden.

Der Trick an sich, die Form „sich selbst zeichnen“ zu lassen, basiert auf der Idee, dass Konturen gestrichelt sein können und man die Länge und den Versatz (Offset) der Strichelung steuern kann. Also stellen Sie sich Folgendes vor: Sie machen den Strich (und den Leerraum danach) so lang, dass er die gesamte Form abdeckt, sodass es aussieht, als wäre die Kontur gar nicht gestrichelt. Aber dann versetzen Sie die Kontur wieder so weit, dass es aussieht, als gäbe es gar keine Kontur. Hier ist der entscheidende Punkt: Animieren Sie den Versatz so, dass es aussieht, als würde sich die Form selbst zeichnen.

Deshalb ist pathLength="1" so nützlich. Wir animieren einfach den Offset von 1 auf 0, was in CSS kinderleicht ist

path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Das obige CSS funktioniert auf jedem konturierten Pfad, vorausgesetzt, Sie verwenden den pathLength-Trick!

Ein kleines Problem: Safari. Safari mag das pathLength-Attribut auf dem Pfad nicht, daher schlägt der einfache 1-zu-0-Trick fehl. Es ist jedoch rettbar. Zuerst müssen wir die natürliche Länge des Pfads herausfinden (anstatt sie auf 1 zu erzwingen). Das können wir tun, indem wir ihn im DOM auswählen und

path.getTotalLength();

In unserem obigen Beispiel beträgt die Länge 8085. Anstelle von 1 verwenden wir also diesen Wert in unserem CSS.

path {
  stroke-dasharray: 8085;
  stroke-dashoffset: 8085;

  animation: dash 5s ease-in-out infinite alternate;
}

@keyframes dash {
  from {
    stroke-dashoffset: 8085;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Hier ist ein Fork des Beispiels mit dieser Anpassung, der in allen Browsern funktioniert. Bleibt zu hoffen, dass Safari pathLength bald unterstützt, da es viel einfacher ist, die Pfadlänge nicht messen zu müssen.

Mehr

© .