title: Change attributes defined in defs on use element
body: <p>How can I achieve changing the style of an "use element", defined in defs, through scripting? I was trying to move in the w3c working draft interfaces, but I lost in that labyrinth </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  
  &lt;svg
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="100"
     height="100"
     id="svg1"&gt;
  
  &lt;defs&gt;
     &lt;g id="minchia" onclick="color(evt)"&gt;
       &lt;rect width="50" height="50" style="fill:#ffff6e;stroke:#ee1400;stroke-width:3" /&gt;
     &lt;/g&gt;
  &lt;/defs&gt;       
  
  &lt;script type="text/javascript"&gt; 
  &lt;![CDATA[ 
  function color(evt)
  {   
      node = evt.target.correspondingUseElement;
  
      alert(node.getAttributeNS(null, "style"));   /* empty! */
      alert(node.getAttributeNS("http://www.w3.org/1999/xlink", "style"));   /* empty! */
  
      node.setAttributeNS("http://www.w3.org/1999/xlink", "fill", "blue");    /* nothing */
      node.setAttributeNS(null, "fill", "blue");  /* nothing */
  }
  ]]&gt; 
  &lt;/script&gt;
  
  &lt;use xlink:href="#minchia" id="frufru" x="10" y="10"  /&gt;       
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>One more thing: what if the referenced element is a "g" which contains 2 other elements, like a rect and a text? How do I set the attribute for the right childNode (through DOM methods off course)?
  In this example, the setAttribute is styling the first child of the referenced element. What if I had to style the second one?</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  
  &lt;svg
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="1000"
    height="1000"
    id="svg1"&gt;
  
  &lt;defs&gt;
    &lt;g id="test" onclick="color(evt)" &gt;
   &lt;rect
     width="54"
     height="58"
     x="1.5"
     y="1.5"
     id="rect5" /&gt;
  &lt;text
     x="-34"
     y="47"
     transform="matrix(0.66777386,-0.74436421,0.74436421,0.66777386,0,0)"
     id="text2987"
     style="font-size:30px;fill:#ffffff;stroke-width:0px"&gt;JC!&lt;/text&gt;
   &lt;/g&gt;
  &lt;/defs&gt;       
  
  &lt;script type="text/javascript"&gt; 
  &lt;![CDATA[ 
  function color(evt)
  {   
  node = evt.target.correspondingUseElement;
      node.setAttributeNS(null, "style", "fill:blue");    
  }
  ]]&gt; 
  &lt;/script&gt;
  
  &lt;use xlink:href="#test" id="frufru" x="10" y="10" style="fill:#000000" /&gt;       
  
  &lt;/svg&gt;
  </code></pre>