Toto je vec trochu ezoterická, len som to raz potreboval urobiť sám a bolo mi to mätúce, takže som si myslel, že k tomu urobím celé video.
Ide o to, že nie všetko je v SVG. je fantastické, pretože to môže byť čokoľvek. Ale jeho syntax je len o niečo zložitejšia ako v iných tvaroch. Takže (možno z tohto dôvodu?) Illustrator vždy vydáva tvary v SVG s tým najvhodnejším prvkom. Obdĺžniky sú , iné tvary zložené iba z priamych čiar sú a , alebo ak ide o otvorený tvar a atď.
To by bolo v poriadku, ibaže metódy DOM pre tieto tvary sa líšia. Element cesty má metódu, getTotalLength()ktorá vám umožní zistiť, aká dlhá je cesta. To je celkom fajn a niekedy užitočné, ale nemôžete to robiť iba na a , na žiadnom inom prvku.
Jedným z dôvodov, prečo by ste možno chceli vedieť, že dĺžka je, že ju chcete animovať tak, aby sa tvar „nakreslil“ - čo je úžasný malý dizajnový efekt (zbierka príkladov). Môžete to urobiť v CSS, ale je pekné použiť nejaký JavaScript, ktorý použije tento CSS, takže zakaždým animuje dokonalú vzdialenosť.
Takže povedzte, že chcete urobiť tento efekt kreslenia, ale tvar je taký, že JavaScript zlyhá. Tento polygón môžete premeniť na cestu bez vizuálnej zmeny, jednoduchým pridaním bodu, ktorý má Bézierovu rukoväť. Rovnako ako v prípade, kliknite pomocou nástroja Pero a ťahajte, aby úchyty vyšli a zarovnajte úchytky priamo pozdĺž čiary, ktorá už existuje. Existencia tohto bodu z neho urobí výstup.
Ak to robíte veľa, existuje nástroj s názvom Poly2Path, ktorý funguje a nevyžaduje tento nadbytočný bod.