Esto es un poco esotérico, solo necesitaba hacerlo yo mismo una vez y lo encontré confuso, así que pensé en hacer un video completo al respecto.
La cuestión es que no todo está en SVG. es fantástico porque puede ser cualquier cosa. Pero la sintaxis es un poco más compleja que cualquiera de las otras formas. Entonces (¿quizás por esa razón?) Illustrator siempre genera las formas en SVG con el elemento más apropiado. Los rectángulos son , otras formas compuestas solo de líneas rectas son a , o si es una forma abierta a , etc.
Eso estaría bien, excepto que los métodos DOM para esas formas varían. Un elemento de ruta tiene un método llamado getTotalLength()que le permite saber la longitud de la ruta. Eso es bastante bueno y, a veces, útil, pero no puede hacerlo solo en un elemento, ningún otro.
Una razón por la que puede querer saber esa longitud es porque tiene la intención de animarla para que la forma "se dibuje a sí misma" - un pequeño efecto de diseño genial (colección de ejemplos). Puedes hacerlo en CSS, pero es bueno usar algo de JavaScript para aplicar ese CSS para que anime la distancia perfecta en todo momento.
Digamos que quiere hacer ese efecto de dibujo, pero la forma es así que JavaScript falla. Puede convertir ese polígono en una ruta, sin cambiarlo visualmente, simplemente agregando un punto que tenga un identificador bezier. Al igual que en, haga clic con la herramienta Pluma y arrastre para que los controladores salgan y alinee los controladores a lo largo de la línea que ya está allí. La existencia de ese punto lo convertirá en una salida.
Si hace esto mucho, hay una herramienta llamada Poly2Path que funciona y no requiere ese punto superfluo.