Animation à partir d'un svg

[dsigmoun]

Bonjour,

A côté du widget Linky, j’ai ajouté un trait de la même couleur en svg. J’aimerai qu’un rond suive ce trait afin de simuler le passage du courant. J’ai trouvé un tuto qui explique comment faire, mais cela dépasse mes compétences

Une âme charitable saurait-elle me coder cela ?

Motion Path : introduction aux animations CSS modernes

Le svg

<svg width="370" height="50" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="52.00164" width="402.01311" y="-1" x="-1"/>
  <g display="none" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" id="svg_1"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path d="M 2.49986, 5.2493
           l 50.75,0
           m 0 0 a 5 5 0 0 1 5 5
           l 0,9.25
           m 0 0 a 5 5 0 0 0 5 5
           l 195.5,0
           m 0 0 a 5 5 0 0 0 5 -5
           l 0,-3
           m 0 0 a 5 5 0 0 1 5 -5
           l 22.5,0
           m 0 0 a 5 5 0 0 1 5 5
           l 0,22
           m 0 0 a 5 5 0 0 0 5 5
           l 49,0
           " 
        id="svg_7" fill-opacity="null" stroke-width="2" stroke="#ccd41f" fill="none"/>
   <!-- Le plus compliqué, car il faut décrire le chemin avec l'attibut d
       M 30 100 les coordonnées du point de départ 
       A pour arc 
       70 70  sont les rayons respectifs en abcisse et en ordonnée
       0 la rotation de l'axe des abcisse     
       1 large-arc-flag  on choisit  le grand arc
       1 sweep-flag le sens de parcours dans le sens des aiguilles d'une montre
       100 170 les coordonnées de mon point final -->
 </g>
</svg>

Merci.

[dsigmoun]

Bon, j’avance un peu. Il reste le problème que le rond est au dessus du trait et non sur le trait.

HTML

CSS

[dsigmoun]

C’est réglé.

HTML

<link rel="stylesheet" href="./montheme/svg_courant/svg_courant.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div style="color:#ccd41f; font-size:30px; left:345px; position:absolute; top:38px;" class="fas fa-plug fa-rotate-90"></div>


<div class="wrapper">
<div class="obj"  style="position: absolute; top:10px"></div>   
<svg width="370" height="50" xmlns="http://www.w3.org/2000/svg">
  <path stroke="#ccd41f" stroke-miterlimit="10" d="M 2.49986, 5.2493
           l 50.75,0
           m 0 0 a 5 5 0 0 1 5 5
           l 0,9.25
           m 0 0 a 5 5 0 0 0 5 5
           l 195.5,0
           m 0 0 a 5 5 0 0 0 5 -5
           l 0,-3
           m 0 0 a 5 5 0 0 1 5 -5
           l 22.5,0
           m 0 0 a 5 5 0 0 1 5 5
           l 0,22
           m 0 0 a 5 5 0 0 0 5 5
           l 45,0" fill-opacity="null" stroke-width="2" stroke="#ccd41f" fill="none"
           />
</svg>
</div>

CSS

.wrapper {
    width: 350px;
    margin: 1rem;
}

.obj {
    offset-path: path('M 2.49986, 5.2493 l 50.75,0 m 0 0 a 5 5 0 0 1 5 5 l 0,9.25 m 0 0 a 5 5 0 0 0 5 5 l 195.5,0 m 0 0 a 5 5 0 0 0 5 -5 l 0,-3 m 0 0 a 5 5 0 0 1 5 -5 l 22.5,0  m 0 0 a 5 5 0 0 1 5 5 l 0,22 m 0 0 a 5 5 0 0 0 5 5 l 49,0');
    offset-distance: 0;
    animation: move 2000ms infinite ;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: #ccd41f;
}

@keyframes move {
    to {
    offset-distance: 100%;
  }
}

[iPapy]

Bonjour @dsigmoun

J’ai pas tout compris sur ou tu place le code hormis le fait que je trouve l’affichage très sympa

[dsigmoun]

Bonjour @iPapy

Pour le CSS, il faut l’enregistrer dans un fichier à mettre ici ./montheme/svg_courant/svg_courant.css . Si tu souhaites un autre dossier ou nom de fichier, il faudrait modifier le lien dans le html

Ensuite, tu ajoutes un html à ton design, et tu y colles le code html. Le tour est joué !

[nebz]

Je suis peut-etre trop perfectionniste mais stoppe ton cercle tant qu’il est dans la prise… le fait qu’il dépasse est presque stressant

[dsigmoun]

Tu as raison ! J’ai modifié le css.

[iPapy]

Merci pour ta réponse, là les 2 neurones que je possèdent ont compris

J’ai une question subsidiaire, le barre graphe à coté du compteur c’est quelque chose d’intégrer au Widget du compteur?

[dsigmoun]

Non c’est la barre du graphique.

[dsigmoun]

En fait, en ralentissant l’animation, je me rends compte que sur certains arcs, il y a un comportement bizarre alors que les mouvements sont identiques entre le html qui trace le trait et le css qui fait le mouvement…

Quelqu’un a une idée ?

[dsigmoun]

Suite à l’aide d’un collègue, voici la version finale.

HTML

<link rel="stylesheet" href="./montheme/svg_courant/svg_courant.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">



<div class="wrapper">
<div class="obj"  style="position: absolute; left:10px; top:10px"></div>   
<svg width="370" height="50" xmlns="http://www.w3.org/2000/svg">
  <path stroke="#ccd41f" stroke-miterlimit="10" d="M 2.49986, 5.2493
           l 50.75,0
           m 0 0 a 5 5 0 0 1 5 5
           l 0,9.25
           m 0 0 a 5 5 0 0 0 5 5
           l 195.5,0
           m 0 0 a 5 5 0 0 0 5 -5
           l 0,-3
           m 0 0 a 5 5 0 0 1 5 -5
           l 22.5,0
           m 0 0 a 5 5 0 0 1 5 5
           l 0,22
           m 0 0 a 5 5 0 0 0 5 5
           l 49,0" fill-opacity="null" stroke-width="4" stroke="#ccd41f" fill="none"
           />
</svg>
</div>
<div style="color:#ccd41f; font-size:30px; left:345px; position:absolute; top:39px;" class="fas fa-plug fa-rotate-90"></div>

CSS

.wrapper {
    width: 350px;
    margin: 1rem;
}

.obj {
    offset-path: path('M 2.49986, 5.2493 l 50.75,0 m 0 0 a 5 5 0 0 1 5 5 l 0,9.25 m 0 0 a 5 5 0 0 0 5 5 l 195.5,0 m 0 0 a 5 5 0 0 0 5 -5 l 0,-3 m 0 0 a 5 5 0 0 1 5 -5 l 22.5,0  m 0 0 a 5 5 0 0 1 5 5 l 0,22 m 0 0 a 5 5 0 0 0 5 5 l 44,0');
    offset-distance: 0;
    animation: move 5000ms infinite ;
    background-color: #ccd41f;
    border-radius: 100%;   
    border: 2px solid #fff;     
    width: 15px;  
    height: 15px; 

}


@keyframes move {
    to {
    offset-distance: 100%;
  }

}