Étant donné un dessin enregistré en SVG depuis illustrator / inkscakpe (puis compressé avec imageoptim ); le code du svg est directement intégré à la page web (svg inline) :
<svg enable-background="new 0 0 184 138" viewBox="0 0 184 138" xmlns="…
<path fill="none" stroke="#000" stroke-width="2" d="…
Les tracés doivent avoir un contour (stroke), et une épaisseur de contour (stroke-width):
<path fill="none" stroke="#000" stroke-width="2" d="…
Le code du svg est directement intégré à la page, et des attributs "class" sont ajoutés aux "path", pour pouvoir les différencier:
<path class="signature" fill="none" stroke="#000" stroke-width="2" d="…
En CSS, on peut alors cibler le path et lui attribuer un pointillé :
.signature { stroke-dasharray: 6; }
On peut également animer le tracé :
.signature { animation: anim-signature 10s linear infinite; }
@keyframes anim-signature {
to {
stroke-dashoffset: 1000;
}
}
Si la longueur du pointillé équivaut à celle du tracé, et que l’offset (le décalage du pointillé) équivaut également à la longueur du tracé,
on peut alors animer cette dernière propriété et ainsi “remplir” le tracé progressivement.
Pour que l’animation se termine sur la dernière frame (et ne revienne pas à la position initiale ; ce qui est le comportement par défaut), il faut ajouter :
.signature { animation-fill-mode: forwards; }
Pour mesurer la longueur du tracé, on peut utiliser javascript :
var signature_path = document.querySelector('.signature');
var signature_length = signature_path.getTotalLength();
console.log(signature_length);