style - svg css properties

Animar la línea discontinua SVG (3)

Creo que deberías poder agregar stroke-dasharray a tu animación y bajar la matriz del tablero en tu CSS. Una versión actualizada de su codepen; http://codepen.io/harvey89/pen/NpaWBE

stroke-dashoffset: 1000; stroke-dasharray: 10; @keyframes dash { to { stroke-dashoffset: 0; stroke-dasharray: 10; } }

Probablemente tendrás que jugar con los números para obtener el efecto deseado

Me gustaría animar una línea punteada en un archivo SVG. La línea debería »crecer« de longitud 0 a longitud completa. Todos los métodos que encontré no son adecuados para mí.

¿Alguien tiene una idea, cómo resolver esto?

Esa es la ruta en mi archivo svg:

<path class="path" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M234.3,119 c-31-0.7-95,9-128.7,50.8"/>

Para animar la línea como lo hice en línea recta :

.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } }

Por supuesto, esto no funciona, cuando quiero que la línea sea discontinua. ¿Hay alguien que tenga una idea de cómo resolver esto?

Ese es mi codepen: http://codepen.io/anon/pen/WpZNJY

PD: No puedo utilizar dos caminos uno sobre el otro para ocultar el camino debajo porque tengo un fondo de color.

Una de las formas de hacerlo es con Javascript. Duplica una ruta creando una polilínea. Prueba el siguiente ejemplo:

<!DOCTYPE HTML> <html> <head> <style> polyline{ stroke-dasharray:8; stroke:black; fill:none; stroke-width:1; } </style> </head> <body > This builds a smooth/dashed polylines that replicates your paths.<br> <button onClick=animateDashPaths()>Animate Paths</button><br> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 830 500" enable-background="new 0 0 830 500" xml:space="preserve"> <path class="path" fill="none" stroke="#000000" stroke-miterlimit="10" d="M234.3,119 c-31-0.7-95,9-128.7,50.8"/>  <path id="pathVienna" display="none" stroke-miterlimit="10" d="M382.8,243.8 c2.9-36.1,15.8-110.3,110.1-145.4"/>  <path id="pathBudapest" display="none" stroke-miterlimit="10" d="M550.6,319.4 c34-2.7,109-2.1,174.8,50.5"/>  <path id="pathSalzburg" display="none" stroke-miterlimit="10" d="M265,323 c21.5,12.1,57.2,39.5,60.7,85.1"/>  <path id="pathTyrol" display="none" stroke-miterlimit="10" d="M147.8,319.5 c-27.1,7-79.7,31.3-92.8,74.2"/> </svg> <script> //---button--- function animateDashPaths() { var NS="http://www.w3.org/2000/svg" //----Vienna---------------- var endLengthVienna=pathVienna.getTotalLength() var lengthDeltaVienna=endLengthVienna/200 var polylineVienna=document.createElementNS(NS,"polyline") Layer_1.appendChild(polylineVienna) var pntListVienna=polylineVienna.points var iTVienna=setInterval(drawPathVienna,5) var cntVienna=0 function drawPathVienna() { var len=lengthDeltaVienna*cntVienna++ if(len<endLengthVienna) { var pnt=pathVienna.getPointAtLength(len) pntListVienna.appendItem(pnt) } else clearInterval(iTVienna) } //----Budapest---------------- var endLengthBudapest=pathBudapest.getTotalLength() var lengthDeltaBudapest=endLengthBudapest/200 var polylineBudapest=document.createElementNS(NS,"polyline") Layer_1.appendChild(polylineBudapest) var pntListBudapest=polylineBudapest.points var iTBudapest=setInterval(drawPathBudapest,5) var cntBudapest=0 function drawPathBudapest() { var len=lengthDeltaBudapest*cntBudapest++ if(len<endLengthBudapest) { var pnt=pathBudapest.getPointAtLength(len) pntListBudapest.appendItem(pnt) } else clearInterval(iTBudapest) } //----Salzburg---------------- var endLengthSalzburg=pathSalzburg.getTotalLength() var lengthDeltaSalzburg=endLengthSalzburg/200 var polylineSalzburg=document.createElementNS(NS,"polyline") Layer_1.appendChild(polylineSalzburg) var pntListSalzburg=polylineSalzburg.points var iTSalzburg=setInterval(drawPathSalzburg,5) var cntSalzburg=0 function drawPathSalzburg() { var len=lengthDeltaSalzburg*cntSalzburg++ if(len<endLengthSalzburg) { var pnt=pathSalzburg.getPointAtLength(len) pntListSalzburg.appendItem(pnt) } else clearInterval(iTSalzburg) } //----Tyrol---------------- var endLengthTyrol=pathTyrol.getTotalLength() var lengthDeltaTyrol=endLengthTyrol/200 var polylineTyrol=document.createElementNS(NS,"polyline") Layer_1.appendChild(polylineTyrol) var pntListTyrol=polylineTyrol.points var iTTyrol=setInterval(drawPathTyrol,5) var cntTyrol=0 function drawPathTyrol() { var len=lengthDeltaTyrol*cntTyrol++ if(len<endLengthTyrol) { var pnt=pathTyrol.getPointAtLength(len) pntListTyrol.appendItem(pnt) } else clearInterval(iTTyrol) } } </script> </body> </html>

También puede hacer esto simplemente usando máscaras de la siguiente manera:

.paths { fill: none; stroke: black; stroke-dasharray: 5; } .mask { fill: none; stroke: white; stroke-width: 10; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } }