Animer un fichier .svg

Michel B. · 7 Mai 2018

Bonjour à tous,
J’ai réalisé un petit fichier .svg représentant un haut-parleur suivi de six arcs de cercle en guise d’ondes.
Pour créer un effet de mouvement, j’ai appliqué une ‘animation’ sur le style ‘opacity’ de chaque arc de cercle.
En voici le code :

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    id="onde"
    version="1.1"
    viewBox="0 0 20 9"
    height="9"
    width="20">
<path
    id="htp1"
    d="M 5.5,0.30021447 C 2.8773206,0.29460327 2.4976213,2.2167114 2.4976213,2.2167114 L 2.497311,6.7186867 c 0,0 0.4947398,1.9655517 3.002689,1.9793133 z"
    style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000066;stroke-width:0.60040528;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
    id="htp2"
    d="m 2.4296691,2.5055884 -2.12941921,-7.09e-5 -2.253e-4,3.9889747 H 2.3801892"
    style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000066;stroke-width:0.60001528;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
    d="m 7.4669072,1.9679622 c 0,0 0.9965342,1.051161 1.009063,2.5155791 0.012528,1.464418 -0.9990919,2.4674749 -0.9990919,2.4674749"
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.38;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    id="onde1">
        <animate
        attributeType="CSS"
        attributeName="opacity"
        values="1;0;1"
        dur="1.5s"
        begin="0s"
        repeatCount="indefinite" />
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60000002;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 8.7928,0.28733757 c 0,0 1.699714,1.79287563 1.721092,4.29061493 0.02137,2.4977375 -1.7040893,4.2085683 -1.7040893,4.2085683"
    id="onde2">
        <animate
        attributeType="CSS"
        attributeName="opacity"
        values="1;0;1"
        dur="1.5s"
        begin="0.2s"
        repeatCount="indefinite" />
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60000002;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 11.086528,0.28733757 c 0,0 1.699714,1.79287563 1.721093,4.29061493 0.02137,2.4977375 -1.70409,4.2085683 -1.70409,4.2085683"
    id="onde3">
        <animate
        attributeType="CSS"
        attributeName="opacity"
        values="1;0;1"
        dur="1.5s"
        begin="0.4s"
        repeatCount="indefinite" />
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60000002;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 13.380257,0.28733757 c 0,0 1.699713,1.79287563 1.721092,4.29061493 0.02137,2.4977375 -1.704089,4.2085683 -1.704089,4.2085683"
    id="onde4">
        <animate
        attributeType="CSS"
        attributeName="opacity"
        values="1;0;1"
        dur="1.5s"
        begin="0.6s"
        repeatCount="indefinite" />
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60000002;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 15.673985,0.28733757 c 0,0 1.699714,1.79287563 1.721092,4.29061493 0.02137,2.4977375 -1.704089,4.2085683 -1.704089,4.2085683"
    id="onde5">
        <animate
        attributeType="CSS"
        attributeName="opacity"
        values="1;0;1"
        dur="1.5s"
        begin="0.8s"
        repeatCount="indefinite" />
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60000002;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 17.967713,0.28778356 c 0,0 1.699713,1.79287564 1.721092,4.29061494 0.02137,2.4977375 -1.70409,4.2085683 -1.70409,4.2085683"
    id="onde6">
        <animate
        attributeType="CSS"
        attributeName="opacity"
        values="1;0;1"
        dur="1.5s"
        begin="1s"
        repeatCount="indefinite" />
</path>
</svg>

Et voici l’adresse où est enregistrée cette page :
http://users.skynet.be/courstoujours/annexes/dessin/audioY.svg
Le navigateur Firefox affiche correctement mon animation mais Microsoft Edge, non : les six arcs de cercle restent uniformément bleus.
Les exemples d’animation avec .svg sur la toile, vues tantôt par Firefox, tantôt par Edge montrent la plupart du temps la même différence : Edge laisse l’image statique. Certaines exemples cependant affichent bien une animation. Mais je n’arrive pas à comprendre pas pourquoi.

Qui peut me montrer comment résoudre ce problème ?

Actuellement, j’utilise un ‘gif’ animé, qui s’affiche au survol des notes, que vous pouvez voir sur la page de mes Commentaires.

elas · 7 Mai 2018

regarder les icon ici: pingdom.com (quand on passe la souris au dessus)

Michel B. · 7 Mai 2018

elas a dit:
regarder les icon ici: pingdom.com (quand on passe la souris au dessus)

Merci, Elas, pour cette référence. J’ai examiné le code de la page d’accueil. En effet, l’animation fonctionne également sous MsEdge.
Si je comprends bien, l’animation des fichiers svg inclus dans le 'html' est commandée par du javascript. J’espérais me limiter à une pure commande css.
Laissez-moi alors gamberger de ce côté-là.

Michel B. · 7 Mai 2018

J’ai trouvé la solution en incorporant du css dans le fichier svg.
Voici mon code :

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    id="onde"
    version="1.1"
    viewBox="0 0 20 9"
    height="9"
    width="20">
<style>

@keyframes hideshow1 {
0%,16% {opacity: 0;}
17%, 100% {opacity: 1;}
}
.onde1 {
animation: hideshow1 1s linear infinite;}

@keyframes hideshow2 {
0%,16% {opacity: 1;}
17%,33% {opacity: 0;}
34%, 100% {opacity: 1;}
}
.onde2 {
animation: hideshow2 1s linear infinite;}

@keyframes hideshow3 {
0%,33% {opacity: 1;}
34%,50% {opacity: 0;}
51%, 100% {opacity: 1;}
}
.onde3 {
animation: hideshow3 1s linear infinite;}

@keyframes hideshow4 {
0%,50% {opacity: 1;}
51%,67% {opacity: 0;}
68%, 100% {opacity: 1;}
}
.onde4 {
animation: hideshow4 1s linear infinite;}

@keyframes hideshow5 {
0%,67% {opacity: 1;}
68%,84% {opacity: 0;}
85%, 100% {opacity: 1;}
}
.onde5 {
animation: hideshow5 1s linear infinite;}

@keyframes hideshow6 {
0%,84% {opacity: 1;}
85%,100% {opacity: 0;}
}
.onde6 {
animation: hideshow6 1s linear infinite;}

</style>
<path
    id="htp1"
    d="M 5.5,0.30021447 C 2.8773206,0.29460327 2.4976213,2.2167114 2.4976213,2.2167114 L 2.497311,6.7186867 c 0,0 0.4947398,1.9655517 3.002689,1.9793133 z"
    style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000066;stroke-width:0.60;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
    id="htp2"
    d="m 2.4296691,2.5055884 -2.12941921,-7.09e-5 -2.253e-4,3.9889747 H 2.3801892"
    style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000066;stroke-width:0.60;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
    d="m 7.4669072,1.9679622 c 0,0 0.9965342,1.051161 1.009063,2.5155791 0.012528,1.464418 -0.9990919,2.4674749 -0.9990919,2.4674749"
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.38;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    id="onde1" class="onde1">
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 8.7928,0.28733757 c 0,0 1.699714,1.79287563 1.721092,4.29061493 0.02137,2.4977375 -1.7040893,4.2085683 -1.7040893,4.2085683"
    id="onde2" class="onde2">
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 11.086528,0.28733757 c 0,0 1.699714,1.79287563 1.721093,4.29061493 0.02137,2.4977375 -1.70409,4.2085683 -1.70409,4.2085683"
    id="onde3" class="onde3">
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 13.380257,0.28733757 c 0,0 1.699713,1.79287563 1.721092,4.29061493 0.02137,2.4977375 -1.704089,4.2085683 -1.704089,4.2085683"
    id="onde4" class="onde4">
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 15.673985,0.28733757 c 0,0 1.699714,1.79287563 1.721092,4.29061493 0.02137,2.4977375 -1.704089,4.2085683 -1.704089,4.2085683"
    id="onde5" class="onde5">
</path>
<path
    style="fill:none;fill-rule:evenodd;stroke:#000066;stroke-width:0.60;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
    d="m 17.967713,0.28778356 c 0,0 1.699713,1.79287564 1.721092,4.29061494 0.02137,2.4977375 -1.70409,4.2085683 -1.70409,4.2085683"
    id="onde6" class="onde6">
</path>
</svg>

Voyez le rendu, si vous le souhaitez, sur la page des Commentaires.
Notez que l’aperçu de l’ancien ‘gif’ n’est plus accessible puisqu’il a été remplacé par un fichier ‘svg’.
Si une solution n’est pas simple, elle n’est pas la bonne, car la solution simple doit exister ou il faut la concevoir.
Bon vent à tous.

elas · 7 Mai 2018

en tous cas, ce site est très original. Du bon Wouaib
ce truc est top : http://users.skynet.be/courstoujours/annexes/dernier_mot/marcheur.htm
comment ne pas penser a l'art ASCII - dommage que ce soit bricolé, on aurait aimé un vrai truc en ascii
Donc finalement ce n'est pas si top, c'est une arnaque

Michel B. · 8 Mai 2018

elas a dit:
en tous cas, ce site est très original. Du bon Wouaib
ce truc est top : http://users.skynet.be/courstoujours/annexes/dernier_mot/marcheur.htm
comment ne pas penser a l'art ASCII - dommage que ce soit bricolé, on aurait aimé un vrai truc en ascii
Donc finalement ce n'est pas si top, c'est une arnaque

« In cauda venenum », dit-on dans nos cuisines… Vos éloges me sont un poison…
En janvier 2006, un commentaire atteste la date de mise en ligne de cet homme de lettres, lequel, est-il précisé par Gilles Lustre, « est né bien avant l’apparition de ‘Windows’ » : j’avais repris ce ‘gif’ comme tel, le mettant au bleu, et lui ai affecté une translation horizontale, d’abord avec la balise ‘marquee’ et, récemment, par application des styles css.
Vous avez cependant raison, j’ai pensé à le reproduire sans recours à l’image mais je n’ai pas mis ce projet en place à ce jour.
Meilleures salutations, Elas.

elas · 8 Mai 2018

comme quoi le wouaib n'est pas mort, j'ai déjà vu plusieurs choses vraiment bien via ce forum (qui n'est pas mort non plus), de l'artisanale, des images, du texte, du très lourd... (malheureusement aussi beaucoup de machins préfabriqués et de la daube digitale)

Rien à dire, si ce n'est que c'est un site qui vaut plus, et vraiment plus que le détour.

Je suis moins orienté dictée de pivot que je vois comme un jongleur dans un cirque qui toujours plus repousse les limites doublés d'un vieux con en blouse qui se croit dans les choristes et qui va sauver l'élève en short qui lance des cailloux joujoux hiboux pa rla fenêtre ; et qui n'a jamais été en face des vrais élèves.

Pour autant, pas de maîtrise de la grammaire et de la langue, pas de raisonnement, pas de subtilité, pas d'algorithmes, pas de communication.

J'ai effectivement une queue dans le bas du dos

Michel B. · 8 Mai 2018

elas a dit:
Rien à dire, si ce n'est que c'est un site qui vaut plus, et vraiment plus que le détour.

Merci à vous, Elias.
Grâce au Site Cheval, en chargeant une découpe de la première des sept séquences de la marche (sans compter les six séquences de l’autre pied), j’ai obtenu une première ‘div’ contenant un alphabet aléatoire, dans laquelle sont affichés les caractères correspondant à la découpe tandis que les autres, servant à incrémenter chaque ligne, sont masqués.
Le résultat est clair : 100 % texte, mais la superposition de treize ‘div’, outre le défilement, rendrait la page trop lourde pour un affichage agréable, me semble-t-il.
Vous avez soulevé un fameux lièvre !

Michel B. · 8 Mai 2018

Voilà : le défi que vous m’aviez lancé, Elias, je viens de le relever. Le terme « arnaque » m’avait titillé : même si l’intention n’y était pas, l’effet ne pouvait être décemment contesté.
La nouvelle mouture totalement dépourvue d’image figure actuellement sur cette page : Homme de lettres.
La page est validée par Unicorn tant pour le css3 que pour le code xhtml.
Comme la réalisation fut hâtive, je n’ai pas encore remplacé le fichier litigieux dont le rendu reste plus fluide et le poids du chargement largement plus faible (2ko + 25ko contre 90 ko).
Je suis ouvert à toute suggestion en vue d’une simplification du dispositif.

Michel B. · 9 Mai 2018

Bonjour,
J’ai encore effectué deux modifications :

En premier lieu, j’ai découvert une séquence de la marche représentée en cinq paliers (plutôt que sept) : j’ai donc généré cinq nouvelles ‘div’ avec le Site Cheval.
En second lieu, j’ai nettoyé le code des styles redondants affectant une couleur de police.

En fin de compte, la page passe de 90ko à 43ko.
Aussi ai-je placé ce contenu à l’adresse originale : Marcheur, remplaçant dès lors la page présentant le ‘gif’ animé.
Bien sûr, le code est vérifié en‘css’ comme en ‘xhtml’ par Unicorn.
Finalement, grâce à vous, Elas, j’ai réalisé en deux jours ce que je reportais depuis des mois.

elas · 9 Mai 2018

La c'est certain, c'est un vrai homme de lettres... C'est excellent dans le contexte

valserine · 9 Mai 2018

Oui c'est beau je dirais même..
et je me suis essayée à l'art du portrait, avec le médecin légiste... j'ai adoré et j'ai eu tout juste !

je reviendrai régulièrement
merci pour ce plaisir.

Michel B. · 9 Mai 2018

Vos compliments, Valserine et Elas, me sont un vrai bon bonheur et je vous en suis reconnaissant.

Michel B. · 19 Mai 2018

valserine a dit:
Oui c'est beau je dirais même..
et je me suis essayée à l'art du portrait, avec le médecin légiste... j'ai adoré et j'ai eu tout juste !
je reviendrai régulièrement
merci pour ce plaisir.

Comme vous, Valserine, j’apprécie les portraits que brosse Phyllis Dorothy JAMES avec une méticulosité inspirée, bien servis par une traduction de belle facture.
Je vous remercie pour votre participation au sondage Évaluez « Cours toujours » et pour votre réponse, avec mention de votre Pseudo, dans le formulaire que vous m’avez envoyé hier, vendredi.

valserine · 20 Mai 2018

Oui @Michel B. , moi aussi j'aime bien ses portraits, d'ailleurs "la salle des meurtres" fait partie de ceux que je n'ai pas lus... J'ai fait un peu d'orthographe et d'expressions idiomatiques aussi.. tout aussi stimulant

quant au sondage c'était une petite manière de dire bonjour