Lo que estoy haciendo es animar un trazo estableciendo primero su stroke-dasharrayy stroke-dashoffset, y luego animando su stroke-dashoffset, de modo que el trazo parezca como si lo estuviera dibujando una mano invisible en tiempo real.
Sin embargo, las animaciones de línea requieren trazos porque las rutas evitan stroke-dasharrayque stroke-dashoffsettengan un efecto perceptible.
Necesito un trazo con un ancho de exactamente 1pxeso es un cuarto de círculo perfecto .
Pero, dado que apesto creando trazos perfectamente curvos de un ancho particular, la única forma en que sé cómo lograr esto es creando una ruta a partir de un objeto circular.
¿Es posible convertir una ruta en un trazo?
¿Hay alguna manera de crear un trazo perfecto de un cuarto de círculo que tenga un ancho de un píxel que no sea simplemente escribir el código yo mismo?
En Inkscape, el Patrón a lo largo de la ruta convertirá una ruta para que se repita o se estire a lo largo de una ruta, haciéndola efectivamente como un trazo. La documentación se puede encontrar aquí:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathEffects-PatternAlongPath.html
También puede usar esto para hacer que los trazos tengan formas de "tapa" personalizadas (como un cuarto de círculo) si las opciones habituales "redondeadas" y "cuadradas" en la pestaña "Estilo de trazo" no son lo suficientemente buenas para usted.
Sin embargo, parece que su objetivo final es simplemente animar la ruta svg para que parezca que está siendo dibujada por una mano invisible. En ese caso, recomendaría simplemente dibujar la ruta y luego usar vivus.js para animarla. La documentación para vivus se puede encontrar aquí:
stroke-dasharrayestá configurado en 'WIDTH-OF-ELEMENT'px, no aparece como una línea de puntos, sino siempre como una línea sólida. En otras palabras, tiene un trazo de 10px, pero 5pxese trazo es solo un espacio vacío. Me cuesta comprender la segunda mitad de tu comentario.LENGTH-OF-STROKEpx. En segundo lugar, estoy implementando el SVG como un SVG en línea en formato HTML para usar en la web. Lo estoy animando usando JavaScript. Todo lo que necesito saber es cómo hacer un trazo perfecto de un cuarto de círculo con la herramienta Bézier o por algún otro medio.
Luciano