title: How to apply the same animation to several SVG objects
body: <p>I would like to create a column chart in embedded SVG with a simple color animation effect on mouseover event of each column. How can I create an animation only once and apply it to any of the columns?</p>
  
  <p>In my example below I put the color animation on the first column. The specific question is how I can apply the same animation on the other columns ( nodes) without repeating the  nodes. Should I use JavaScript? Or can I use some kind of reference on the animation nodes?</p>
  
  <pre><code>&lt;svg class="columnChart"&gt;
      &lt;g transform="matrix(1 0 0 -1 0 0) translate(0, -100)"&gt;
          &lt;rect width="10" height="100" x="0" y="0"&gt;
              &lt;animate attributeName="fill"
                  attributeType="XML"
                  begin="mouseover"
                  dur="0.25s"
                  fill="freeze"
                  to="#00ff00"/&gt;
              &lt;animate attributeName="fill"
                  attributeType="XML"
                  begin="mouseout"
                  dur="0.25s"
                  fill="freeze"
                  to="#000000"/&gt;
          &lt;/rect&gt;
          &lt;rect width="10" height="80" x="15" y="0"/&gt;
          &lt;rect width="10" height="55" x="30" y="0"/&gt;
          &lt;rect width="10" height="60" x="45" y="0"/&gt;
      &lt;/g&gt;
      &lt;g transform="rotate(90)"&gt;
          &lt;text x="110"&gt;mo&lt;/text&gt;
      &lt;/g&gt;
      &lt;g transform="rotate(90)"&gt;
          &lt;text x="110" y="-15"&gt;tu&lt;/text&gt;
      &lt;/g&gt;
      &lt;g transform="rotate(90)"&gt;
          &lt;text x="110" y="-30"&gt;we&lt;/text&gt;
      &lt;/g&gt;
      &lt;g transform="rotate(90)"&gt;
          &lt;text x="110" y="-45"&gt;th&lt;/text&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Thanks for your help in advance.</p>