title: setAttribute("transform",...) doesn't work on <symbol> element
body: <p>I need some helping in svg/javascript programming. I made a SVG Graphic in which the elements "Stern" should rotating by the <code>onmouseover-event</code>. We are not allowed to use the svg-animations and the animation should be done by javascript. My idea is to use <code>setAttribute("transform",...)</code>, but that doesn't work anyway. I google about an hour, but nothing I found there works.
  The function stern_rotieren is triggered by the mouse (I tested it with <code>alert("test")</code>) and things like <code>setAttribute("fill","white")</code> works perfectly in the same function. Only <code>setAttribute("transform",...)</code> doesn't work. Maybe you can show me my failure, I'm desperate.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;defs&gt;
      &lt;script type="text/javascript"&gt;
  
          other functions
  
          function stern_rotieren(){
              var stern=document.getElementById("Stern");
              stern.setAttribute("transform","rotate(15 500 500)");           
          }
  
      &lt;/script&gt;
      &lt;symbol id="Baum" fill="white" stroke="green" stroke-width="5"&gt;
          &lt;path d="M 1000,200 Q 950,400 800,500 Q 600,600 750,650 T 700,850" /&gt;
          &lt;path d="M 700,850 Q 400,1100 600, 1100 T 500,1400" /&gt;
          &lt;path d="M 500,1400 Q 250,1600 450,1600 L 850,1600 Q 950,1600 950,1700" /&gt;
      &lt;/symbol&gt;
      &lt;symbol id="Kugel" fill="red" onclick="kugel_farbe()" transform="translate(0,0)"&gt;
          &lt;circle cx="50" cy="50" r="50" /&gt;
      &lt;/symbol&gt;
      &lt;symbol id="Stern" fill="yellow" onclick="stern_farbe()" onmouseover="stern_rotieren()" &gt;
          &lt;polygon points="200,20 80,360 380,120 20,120 320,360"/&gt;
      &lt;/symbol&gt;
  &lt;/defs&gt;
  
  &lt;use xlink:href="#Baum" transform="translate(0,250)" /&gt;
  &lt;use xlink:href="#Baum" transform="translate(2000,250) scale(-1,1)" /&gt;
  &lt;use xlink:href="#Kugel" transform="translate(850,1050)" /&gt;
  &lt;use xlink:href="#Kugel" transform="translate(1050,750)" /&gt;
  &lt;use xlink:href="#Kugel" transform="translate(1200,1250)" /&gt;
  &lt;use xlink:href="#Kugel" transform="translate(700,1650)" /&gt;
  &lt;use xlink:href="#Kugel" transform="translate(1300,1700)" /&gt;
  &lt;use xlink:href="#Stern" transform="translate(800,185)" /&gt;
  &lt;use xlink:href="#Stern" transform="translate(970,900) scale(0.5)" /&gt;
  &lt;use xlink:href="#Stern" transform="translate(800,1300) scale(0.5)" /&gt;
  </code></pre>
  
  <p></p>