Animation à partir d'un svg

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 :sweat_smile:

Une âme charitable saurait-elle me coder cela ?

https://www.alsacreations.com/tuto/lire/1807-Motion-Path--introduction-aux-animations-CSS-modernes.html

image

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.

1 J'aime

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

svg_courant

HTML


CSS


C’est réglé.

svg_courant2

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%;
  }
}
4 J'aimes

Bonjour @dsigmoun

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

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é ! :grin:

1 J'aime

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 :stuck_out_tongue:

image

1 J'aime

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

1 J'aime

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

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

Non c’est la barre du graphique.

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 ?

courantv2

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%;
  }

}

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.