Comment appliquer la même animation à plusieurs objets SVG

Question

Je voudrais créer un graphique à colonnes en SVG incorporé avec un effet d'animation couleur simple sur l'événement mouseover de chaque colonne. Comment puis-je créer une animation une seule fois et l'appliquer à l'une des colonnes?

Dans mon exemple ci-dessous, j'ai mis l'animation de couleur sur la première colonne. La question spécifique est comment je peux appliquer la même animation sur les autres colonnes (nœuds) sans répéter les nœuds. Devrais-je utiliser JavaScript? Ou puis-je utiliser une sorte de référence sur les nœuds d'animation?

<svg class="columnChart"> 
    <g transform="matrix(1 0 0 -1 0 0) translate(0, -100)"> 
     <rect width="10" height="100" x="0" y="0"> 
      <animate attributeName="fill" 
       attributeType="XML" 
       begin="mouseover" 
       dur="0.25s" 
       fill="freeze" 
       to="#00ff00"/> 
      <animate attributeName="fill" 
       attributeType="XML" 
       begin="mouseout" 
       dur="0.25s" 
       fill="freeze" 
       to="#000000"/> 
     </rect> 
     <rect width="10" height="80" x="15" y="0"/> 
     <rect width="10" height="55" x="30" y="0"/> 
     <rect width="10" height="60" x="45" y="0"/> 
    </g> 
    <g transform="rotate(90)"> 
     <text x="110">mo</text> 
    </g> 
    <g transform="rotate(90)"> 
     <text x="110" y="-15">tu</text> 
    </g> 
    <g transform="rotate(90)"> 
     <text x="110" y="-30">we</text> 
    </g> 
    <g transform="rotate(90)"> 
     <text x="110" y="-45">th</text> 
    </g> 
</svg> 

Merci de votre aide à l'avance.

Answer 1

Vous ne pouvez malheureusement pas réutiliser des éléments d'animation. Alors oui, vous devriez probablement utiliser Javascript de deux façons. Soit vous l'utilisez pour dupliquer les éléments d'animation et les ajoutez à l'intérieur de chaque élément, soit vous faites directement l'animation dans JS (ce qui pourrait bien mieux fonctionner de toute façon).

Answer 2

Vous pouvez le faire avec des définitions. Dans mon cas, je réutilise un dégradé animé comme remplissage. Définir le remplissage (par exemple avec id animating_fill) avec ses animations associées et ensuite le référencer comme le remplissage dans vos barres en utilisant style = "... fill: url (#animating_fill); ..."

Je pense que cela est probablement mieux qu'une solution js (bien que j'utilise JS pour mettre en place les définitions dans mon cas).

Answer 3

Vous pouvez utiliser CSS3 Transitions. Voici un example qui combine des animations SVG et des transitions CSS, avec une opacité en train d'être animée avec des transitions CSS et une largeur rectale avec des éléments <animate>.