如何將相同的動畫應用於多個SVG對象

我想在嵌入式SVG中創建一個柱狀圖，並在每個列的mouseover事件上使用簡單的顏色動畫效果。我如何只創建一次動畫並將其應用於任何列？如何將相同的動畫應用於多個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