Questa è una cosa un po 'esoterica, avevo solo bisogno di farlo da solo una volta e l'ho trovato confuso, quindi ho pensato di fare un intero video su di esso.
Il fatto è che non tutto è in SVG. è fantastico perché può essere qualsiasi cosa. Ma la sintassi per questo è solo un po 'più complessa di qualsiasi altra forma. Quindi (forse per questo motivo?) Illustrator produce sempre le forme in SVG con l'elemento più appropriato. I rettangoli sono , altre forme composte da sole linee rette sono a , o se è una forma aperta a , ecc.
Andrebbe bene, tranne per il fatto che i metodi DOM per quelle forme variano. Un elemento path ha un metodo chiamato getTotalLength()che ti permette di sapere quanto è lungo il percorso. È abbastanza interessante e talvolta utile, ma non puoi farlo solo su un , nessun altro elemento.
Uno dei motivi per cui potresti voler sapere quella lunghezza è perché intendi animarlo in modo che la forma "si disegna da sola" - un piccolo e simpatico effetto di design (raccolta di esempi). Puoi farlo in CSS, ma è bello usare un po 'di JavaScript per applicare quel CSS in modo che animi ogni volta la distanza perfetta.
Quindi dì che vuoi fare quell'effetto di disegno, ma la forma è un quindi JavaScript fallisce. Puoi trasformare quel poligono in un percorso, senza modificarlo visivamente, semplicemente aggiungendo un punto ad esso con una maniglia più bezier. Come in, fai clic con lo strumento Penna e trascina in modo che le maniglie fuoriescano e allineano le maniglie proprio lungo la linea che è già lì. L'esistenza di quel punto lo renderà un in uscita.
Se lo fai spesso, c'è uno strumento chiamato Poly2Path che funziona e non richiede quel punto superfluo.