Mi código JS revisa cada ruta y agrega un stroke-dasharray y stroke-dashoffset según la longitud de la ruta:
setTimeout(() => { const $paths = document.getElementsByTagName('path'); for (const path of $paths) { const totalLength = path.getTotalLength(); path.style.strokeDashoffset = totalLength; path.style.strokeDasharray = totalLength; } }, 300); Luego, My CSS simplemente anima el dashoffset a 0 , mientras reduce la opacidad del trazo y aumenta la opacidad del relleno:
.character path { fill-opacity: 0; stroke-opacity: 1; stroke-width: 2px; stroke: white; -webkit-animation: path 4s linear 1s both; animation: path 4s linear 1s both; } @keyframes path { 70% { fill-opacity: 0; } 80% { stroke-dashoffset: 0; stroke-opacity: 1; } 100% { stroke-opacity: 0; stroke-dashoffset: 0; fill-opacity: 1; } } Esto funciona perfectamente en Chrome: la animación muestra los caminos que se están dibujando, pero en Safari, los caminos simplemente aparecen sin ninguna animación.
Intenté prefijar pero no funciona.
EDITAR: Esto está relacionado de alguna manera con el tiempo de espera que configuré, solo lo agregué al código de la pregunta. Tengo que agregar ese tiempo de espera porque el svg se carga dinámicamente. Aquí hay un Fiddle que muestra el problema (funciona en Chrome, no en Safari), gracias @kaiido.
Resolví esto haciendo dos cosas:
animation en el JS tambiénsetTimeout si el retraso de la animación es mayor que el tiempo de espera. Así que bajé el retraso a 200 ms.JS actualizado:
setTimeout(() => { const $paths = document.getElementsByTagName('path'); for (const path of $paths) { const totalLength = path.getTotalLength(); path.style.strokeDashoffset = totalLength; path.style.strokeDasharray = totalLength; path.style.animation = 'path 4s linear 0.2s both'; }; }, 300);