Opción 1: Animando el atributo SVG - d
Para conseguir una animación de dibujo progresivo, una manera es hacerlo de forma "escalonada", es decir, primero indicamos el punto de origen con todos sus futuros puntos de inflexión. Luego usando animate
vamos moviendo uno a uno dichos puntos
Ejemplo:
<svg width="500" height="250">
<path class="path" stroke="red" stroke-width="3" fill="none" d="M 150,0 l 0,0 l 0,0 l 0,0">
<animate attributeType="XML" attributeName="d" to="M 150,0 L 75,200 l 0,0 l 0,0" dur="1s" fill="freeze" />
<animate attributeType="XML" attributeName="d" to="M 150,0 L 75,200 L 225,200 l 0,0" begin="1s" dur="1s" fill="freeze" />
<animate attributeType="XML" attributeName="d" to="M 150,0 L 75,200 L 225,200 L 150,0" begin="2s" dur="1s" fill="freeze" />
</path>
</svg>
Ejemplo 2:
Otra forma sería usando values
, como lo indica @enxaneta
<svg width="500" height="250">
<path class="path" stroke="red" stroke-width="3" fill="none">
<animate attributeType="XML" attributeName="d" values="M 150,0 l 0,0 l 0,0 l 0,0; M 150,0 L 75,200 l 0,0 l 0,0; M 150,0 L 75,200 L 225,200 l 0,0; M 150,0 L 75,200 L 225,200 L 150,0" dur="3s" fill="freeze" />
</path>
</svg>
Otra forma de lograrlo usando:
Para que funcione correctamente necesitamos saber el largo total de la línea, el cual podemos obtener usando Javascript
var path = document.querySelector('.path');
var length = path.getTotalLength();
Con ese dato, podemos definir stroke-dasharray
(longitud de guiones) y stroke-dashoffset
(espacio entre los guiones) igual a dicha longitud.
Luego usando animate
llevamos stroke-dashoffset
a cero para generar la animación
Ejemplo:
<svg width="500" height="250">
<path class="path" stroke="red" stroke-width="3" stroke-dasharray="577.200" stroke-dashoffset="577.200" fill="none" d="M150 0 L75 200 L225 200 Z">
<animate attributeType="XML" attributeName="stroke-dashoffset" to="0" dur="3s" fill="freeze" />
</path>
</svg>
Opción 3: Usando CSS
También se puede hacerlo con:
Ejemplo:
.path {
stroke-dasharray: 577.200;
stroke-dashoffset: 577.200;
animation: line 3s linear forwards;
}
@keyframes line {
to {
stroke-dashoffset: 0;
}
}
<svg width="500" height="250">
<path class="path" stroke="red" stroke-width="3" fill="none" d="M150 0 L75 200 L225 200 Z"></path>
</svg>