5

Tengo una figura dibujada con la etiqueta Path de SVG/HTML. Lo que quiero es que esta figura se genere paso por paso. Es decir que se vea el efecto de animación línea por línea, como si estuviera dibujando a mano alzada. El siguiente es mi código que no funciona:

<svg width="500" height="250">
  <path d="0" stroke="red" stroke-width="3" fill="none">
    <animate attributeName="d" values="M150 0 L75 200 L225 200 Z" dur="3s"/>
   </path>
</svg>

Estoy intentando animar el atributo d de la etiqueta path. Cuando animo cualquier otra propiedad funciona, pero con la propiedad "d" algo estoy haciendo mal, y no sé qué es.

2 respuestas 2

4

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>


Opción 2: Usando otros SVG - Attributes

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>

3
  • También se puede lograr usando Javascript, pero como el tag no está en la pregunta lo voy a omitir. En lo personal me inclino por la opción 2, siendo desde mi punto de vista la más simple (siempre y cuando no se modifique el tamaño del SVG)
    – Marcos
    Commented el 3 dic. 2019 a las 12:33
  • 1
    En lugar de utilizar 3 elementos <animate> en el primer ejemplo puedes utilizar un solo elemento si en lugar del atributo to utilizas el atributo values. En este case el valor del atributo values sería la lista de valores separados por ;
    – enxaneta
    Commented el 19 dic. 2019 a las 10:45
  • 1
    @enxaneta, excelente idea. Actualice mi respuesta (dandote el crédito) Gracias!
    – Marcos
    Commented el 19 dic. 2019 a las 12:42
0

Mmmmmm bueno lo que se me ocurre es que puedas realizarlo con keyframes en CSS aqui te dejo un ejemplo:

<svg width="300px" height="175px" version="1.1">
    <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>

y en el caso del css seria lo siguiente:

svg {
    width: 300px;
    display: block;
    position: absolute;
}
svg .path {
    stroke-dasharray: 320;
    stroke-dashoffset: 0;
    animation: dibujar-linea 1s linear;
}
@keyframes dibujar-linea {
    from {
        stroke-dashoffset: 320;
    }
    to {
        stroke-dashoffset: 0;
    }
}

En éste caso se dibuja una linea curva, stroke-dashoffset es el que se va modificando en la animación.

Espero te sirva ;) Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.