複数のSVGオブジェクトに同じアニメーションを適用する方法

各列のmouseoverイベントに単純なカラーアニメーション効果を組み込んだ埋め込みSVGで縦棒グラフを作成したいと思います。アニメーションは一度しか作成せず、どの列にも適用できますか？複数のSVGオブジェクトに同じアニメーションを適用する方法

私の例では、カラーアニメーションを最初の列に配置します。特定の問題は、ノードを繰り返さずに他の列（ノード）に同じアニメーションを適用する方法です。 JavaScriptを使うべきですか？または、アニメーションノードで何らかのリファレンスを使用できますか？

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

ご協力いただきありがとうございます。

出典

2011-10-19 Márton