Das ist ein bisschen esoterisch, ich musste es nur einmal selbst machen und fand es verwirrend, also dachte ich, ich würde ein ganzes Video darauf machen.
Die Sache ist, nicht alles ist ein in SVG. ist fantastisch, weil es alles sein kann. Die Syntax dafür ist jedoch etwas komplexer als bei allen anderen Formen. Also (vielleicht aus diesem Grund?) Illustrator gibt die Formen in SVG immer mit dem am besten geeigneten Element aus. Rechtecke sind , andere Formen, die nur aus geraden Linien bestehen , sind a , oder wenn es sich um eine offene Form a handelt , usw.
Das wäre in Ordnung, außer dass die DOM-Methoden für diese Formen variieren. Ein Pfadelement verfügt über eine Methode, mit getTotalLength()der Sie wissen, wie lang der Pfad ist. Das ist ziemlich cool und manchmal nützlich, aber man kann es nicht nur mit einem anderen Element machen.
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 dies in CSS tun, aber es ist schön, JavaScript zu verwenden, um dieses CSS anzuwenden, damit jedes Mal die perfekte Entfernung animiert wird.
Angenommen, Sie möchten diesen Zeichnungseffekt ausführen, aber die Form ist so, dass das JavaScript fehlschlägt. Sie können dieses Polygon in einen Pfad verwandeln, ohne es visuell zu ändern, indem Sie einfach einen Punkt hinzufügen, der über einen Bezier-Griff verfügt. Klicken Sie wie in mit dem Stiftwerkzeug und ziehen Sie, damit die Griffe herauskommen und die Griffe genau entlang der Linie ausrichten, die bereits vorhanden ist. Die Existenz dieses Punktes macht ihn zu einer Ausgabe.
Wenn Sie dies häufig tun, gibt es ein Tool namens Poly2Path, das funktioniert und diesen überflüssigen Punkt nicht benötigt.