Bonjour à tous!

Je suis entrain d'apprendre actuellement à manipuler des éléments svg, notamment pour essayer de faire des animations sympas.

J'ai suivi cette vidéo de la chaîne L'école du Web: https://www.youtube.com/watch?v=yzxHAXevIA4 et en m'inspirant de cette dernière, je souhaiterais animer un texte, en me rapprochant le plus possible d'un animation type "écriture à la main", plutôt que simplement animer le contour des lettres.

Bien conscient que stroke-dasharray et stroke-dashoffset, ne permettent justement que d'animer le contour, je me suis dit que j'allais juste rendre le contour très épais, de sorte qu'ils recouvrent en fait l'intérieur de la lettre, et que j'allais animer le tout.

Évidemment ce n'est pas exactement l'effet que je recherche mais ça s'en rapproche, et à défaut de trouver une vraie solution lors de mes recherches sur le net, j'essaie donc par ce biais là, et j'ai donc fait ceci: https://codepen.io/valerio-fluo/pen/gONZmJm

Seulement il y a un pb de taille, que je n'arrive pas à expliquer. Certaines de mes lettres, ne se "remplissent" pas totalement comme vous pouvez le voir sur cette capture:

Et ce, même en mettant des valeurs pharaonique dans stroke-dasharray, le tracé du stroke semble s'arrêter net à ce stade.

Je souhaiterais donc comprendre, pourquoi ce comportement? Et éventuellement comment y remédier, mais plus qu'une solution je souhaiterais vraiment comprendre s'il vous plaît, pourquoi il se passe ça. D'ailleurs pour quoi le E et le O sont ils correctement tracés, et pas les autres lettres?

Merci à vous

-
Edité par ValerioFluo 7 septembre 2024 à 11:34:17

Personne? Cela viendrait-il tout simplement de l'utilisation de l'élément <text> au lien d'un <path> ? Mais si oui pourquoi s'il vous plait?

Bon si jamais quelqu'un d'autre un jour se pose la même question, on a répondu à ma question sur un serveur discord américain (celui de Kevin Powell un expert en front end) même pas 10min après avoir posé ma question.

En fait le contour de mes lettres se dessine bien correctement et entièrement, mais les petits carrés que je pensais "manquants" illustrés par ma capture d'écran précédente, ne sont en fait que des espaces entre les différents traits composants ma lettre, ils apparaissent ainsi justement à cause de l'épaisseur du trait que j'ai choisie, et de la police de caractère.
Voici une image qui illustre ce qu'il se passe:


le trait noir représente le trait initial, le rouge et le vert représentent l'épaississement de mon trait, qui fait qu'il se forme ce petit carré "vide" dans le coin en haut à droite.

Une solution pour éviter cela est donc d'ajouter la ligne suivante dans les règles css concernant l'élément text:

stroke-linecap: square;

Cette attribut définit la forme de fin des traits justement, ici en y ajoutant une forme carrée on couvre la partir blanche apparente.

-
Edité par ValerioFluo 25 septembre 2024 à 11:14:47

Merci pour l'info. Cependant il n'est pas très élégant de préciser qu'on t'a répondu "en même pas dix minutes" sur un autre forum.

Perso, j'ai pensé à stroke-linecap: square et testé, mais sans résultat chez moi.

Pense à mettre résolu et bonne continuation.

@Domi65:

Ah je m'excuse si cela a pu sembler inélégant de ma part, j'ai dit cela uniquement dans un but d'aide.
Car j'ai cru constater avec ma question que ce forum était un peu moins fréquenté qu'il y a quelques années, peut-être était-ce juste une impression, mais j'ai pensé que pour les novices dans mon genre ayant éventuellement besoin d'aide, rapidement, il était intéressant de savoir que pour les non anglophobes, il y avait des alternatives rapides.

Pour ce qui est de

stroke-linecap: square

je pense que cela dépend de la police de caractère utilisée, ça fonctionne pour mon Times New Roman pas très sexy, mais j'imagine qu'avec des polices ayant des formes plus épurées, ça ne doit pas fonctionner, faudrait d'ailleurs que j'étudie ça.

-
Edité par ValerioFluo 30 septembre 2024 à 11:06:42