Ez egy kis dolog ezoterikus dolga, csak egyszer kellett magamnak megcsinálnom, és zavarosnak találtam, ezért gondoltam, hogy csinálok egy egész videót róla.
A helyzet az, hogy nem minden van SVG-ben. fantasztikus, mert bármi lehet. De a szintaxisa csak egy kicsit összetettebb, mint a többi alak. Tehát (talán ezért?) Az Illustrator mindig az SVG alakjait adja ki a legmegfelelőbb elemmel. A téglalapok , más, csak egyenes vonalakból álló alakzatok a , vagy ha nyitott alak a , stb.
Ez rendben lenne, csakhogy az alakzatok DOM-módszerei eltérnek. Az útvonal elemnek van egy úgynevezett metódusa, getTotalLength()amely megmondja, hogy mennyi az út. Ez nagyon klassz és néha hasznos, de nem csak egy , más elemen nem lehet megtenni .
Az egyik ok, amiért érdemes tudni ezt a hosszúságot, az az, hogy meg akarja animálni azt, hogy az alak „megrajzolja önmagát” - ez egy jó kis tervezési hatás (példák gyűjteménye). Megteheti CSS-ben, de jó, ha valamilyen JavaScript-et használ a CSS alkalmazásához, így minden alkalommal tökéletes távolságot animál.
Tehát mondjuk, hogy ezt a rajzhatást szeretné megtenni, de az alakja egy, így a JavaScript nem működik. A sokszöget utává alakíthatja anélkül, hogy azt vizuálisan megváltoztatná, egyszerűen hozzáadva egy pontot bezier fogantyúval. Ahogyan itt van, kattintson a Toll eszközzel, és húzza, hogy a fogantyúk kijöjjenek, és igazítsa a fogantyúkat a már meglévő vonal mentén. Ennek a pontnak a megléte a kimeneté lesz.
Ha sokat csinál, akkor van egy Poly2Path nevű eszköz, amely működik, és nem igényli ezt a felesleges pontot.