11527 sujets

JavaScript, DOM et API Web HTML5

Un trait qui bouge avec la souris alors qu'il devrait être animé

Bonjour à vous tous,

Je me suis plongé dans le Javascript associé aux animations SVG. Je suis sur un cas où je ne comprends pas le fonctionnement.

Le code HTML et Javascript est le suivant :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eléments SVG avec Javascript</title>
</head>

<body>
    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" id="svgCanvas">
        <line x1="50" y1="100" x2="150" y2="100" stroke="purple" stroke-width="4" id="interactiveLine" />
    </svg>
    <script>
        const line = document.getElementById('interactiveLine');
        const svgCanvas = document.getElementById('svgCanvas');

        svgCanvas.addEventListener('mousemove', (e) => {
            const rect = svgCanvas.getBoundingClientRect();
            line.setAttribute('x2', e.clientX - rect.left);
            line.setAttribute('y2', e.clientY - rect.top);
        });
    </script>
</body>

</html>

A la base, c'est sensé tracer une ligne horizontalement animée mais le bout du tracé bouge quand je déplace ma souris. Je ne comprends pas bien ce bout de code. Quelqu'un pourrait me l'expliquer ?

Merci pour votre aide,
et bonnes fêtes !
Modérateur
Salut,

Rien de trop complexe pourtant

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" id="svgCanvas">
        <line x1="50" y1="100" x2="150" y2="100" stroke="purple" stroke-width="4" id="interactiveLine" />
    </svg>

Ton SVG avec une ligne.

Et dans le Js :

const line = document.getElementById('interactiveLine');

On récupère la ligne

const svgCanvas = document.getElementById('svgCanvas');

On récupère le canvas

svgCanvas.addEventListener('mousemove', (e) => {

On déclenche une fonction au "mousemove"

            const rect = svgCanvas.getBoundingClientRect();

On récupère la taille du conteneur

            line.setAttribute('x2', e.clientX - rect.left);

On petit calcul pour modifier le x de la find e la courbe en fonction de la position du curseur

            line.setAttribute('y2', e.clientY - rect.top);

On petit calcul pour modifier le y de la find e la courbe en fonction de la position du curseur
Et... bah c'est tout... tu bloquais sur quoi ?
Modifié par _laurent (20 Dec 2024 - 10:17)
Je bloque sur le fait que la version SVG suivante :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="100" x2="190" y2="100" stroke="green" stroke-width="4">
        <animate attributeName="x2" from="10" to="190" dur="2s" repeatCount="indefinite" />
    </line>
</svg>

anime le trait horizontalement, de gauche à droite et que sa version Javascript ne fait pas du tout la même chose. Le trait bouge dans tous les sens quand je déplace la souris !

Ce bout de code provient d'un cours Javascript que j'ai déniché sur le web, que je suis actuellement. Ce cours parle des animations SVG dans le HTML et propose des solutions, à) la fois, Javascript et SVG. Mais ça ne donne pas du tout le même résultat avec la version Javascript.
Modifié par ObiJuanKenobi (20 Dec 2024 - 16:03)
Modérateur
Bonjour,

ObiJuanKenobi a écrit :
....Ce bout de code provient d'un cours Javascript que j'ai déniché sur le web, que je suis actuellement. Ce cours parle des animations SVG dans le HTML et propose des solutions, à) la fois, Javascript et SVG. Mais ça ne donne pas du tout le même résultat avec la version Javascript.

1) Utiliser la balise <animate> (et plus largement tout ce qui est défini dans SMIL) pour animer les SVG pose question. Il vaut mieux utiliser du css autant que possible.

Historiquement, SMIL permettait d'animer les SVG, puis css est devenu capable d'animer les SVG. Les développeurs de navigateurs (au moins chez Google) ont alors commencé à dire qu'ils allaient peut-être laisser tomber SMIL.

Il semble que finalement SMIL n'ait toujours pas été "déprécié" (déjà parce qu'il y a beaucoup de codes utilisant SMIL et aussi peut-être parce que SMIL en fait un peu plus que css). Mais je ne parierai pas sur son avenir. C'est pourquoi, bien qu'utilisant énormément de SVG (animés ou pas), je n'utilise jamais SMIL, et je déconseille son utilisation.

2) La balise <animate> n'est pas prévue pour réagir à tes mouvements de souris tandis que ton code JS, lui, est prévu pour réagir à tes mouvements de souris. C'est a priori pour ça que tu obtiens deux comportements différents (si j'ai bien compris ce que tu as essayé de faire).

En gros, vois <animate> comme une animation css . Et une animation css, c'est pareil, elle ne va pas réagir à tes mouvements de souris "comme ça". Il faut du code JS obligatoirement si on veut qu'il se passe quelque chose quand on bouge la souris.

Note : on est en 2024, et en 2024, la ligne
<meta http-equiv="X-UA-Compatible" content="IE=edge">
ne sert pas à grand chose si ce n'est alourdir tes pages. C'est surement ajouté automatiquement par ton éditeur de code, mais ça n'en reste pas moins inutile. Smiley lol

Amicalement,
Modifié par parsimonhi (21 Dec 2024 - 02:37)
Prévenir un modérateur
Répondre au sujet
Aller à