26: Formen zu Pfaden erzwingen

Das ist eine ziemlich obskure Sache, ich musste sie nur einmal selbst machen und fand sie verwirrend, also dachte ich, ich mache ein ganzes Video dazu.

Die Sache ist, nicht alles ist ein <path> in SVG. <path> ist fantastisch, weil es *alles* sein *kann*. Aber die Syntax dafür ist einfach etwas komplexer als die aller anderen Formen. Also (vielleicht aus diesem Grund?) gibt Illustrator die Formen in SVG immer mit dem am besten geeigneten Element aus. Rechtecke sind <rect>, andere Formen, die nur aus geraden Linien bestehen, sind ein <polygon>, oder wenn es eine offene Form ist, ein <polyline>, usw.

Das wäre in Ordnung, außer dass sich die DOM-Methoden für diese Formen unterscheiden. Ein Pfadelement hat eine Methode namens getTotalLength(), die Ihnen verrät, wie lang der Pfad ist. Das ist ziemlich cool und manchmal nützlich, aber Sie können es nicht nur bei einem <path> tun, bei keinem anderen Element.

Ein Grund, warum Sie diese Länge wissen möchten, ist, dass Sie sie animieren möchten, damit sich die Form "selbst zeichnet" – ein cooler kleiner Designeffekt (Sammlung von Beispielen). Sie können es in CSS tun, aber es ist schön, etwas JavaScript zu verwenden, um dieses CSS anzuwenden, damit es jedes Mal die perfekte Distanz animiert.

Sagen wir also, Sie möchten diesen Zeicheneffekt erzielen, aber die Form ist ein <polygon>, und das JavaScript schlägt fehl. Sie können dieses Polygon in einen Pfad umwandeln, ohne es visuell zu verändern, indem Sie einfach einen Punkt hinzufügen, der einen Bézier-Griff hat. Das heißt, klicken Sie mit dem Zeichenstift-Werkzeug und ziehen Sie, damit die Griffe herauskommen und die Griffe genau entlang der bereits vorhandenen Linie ausrichten. Die Existenz dieses Punktes macht es zu einem <path> in der Ausgabe.

Wenn Sie das oft tun, gibt es ein Werkzeug namens Poly2Path, das funktioniert und keinen überflüssigen Punkt benötigt.