title: Read Attributes of SVG-Elements in HTML via JS
body: <p>I have the following markup (HTML with native SVG):</p>
  
  <pre><code>&lt;!doctype html&gt;
     &lt;!-- ...    
          html-Elements 
          ... --&gt; 
     &lt;svg version="1.1" ... &gt;
          &lt;defs&gt; &lt;circle id="infop" cx="0" cy="0" r="9" /&gt; &lt;/defs&gt;
          &lt;!-- ... 
               svg Elements
               ... --&gt; 
          &lt;svg&gt; &lt;!-- to have separate coordinate-system --&gt;
              &lt;g id="outSvg"&gt;&lt;/g&gt;
          &lt;/svg&gt;
      ...
  </code></pre>
  
  <p>A js-method outputs a line and several <code>&lt;use href="infotop"&gt;</code> Elements to <code>#outSvg</code> (to become a graph).
  The <code>&lt;use&gt;</code> Elements have onmouseover-Events to show tooltips.</p>
  
  <p><strong>Now, when it comes to retrieving the coordinates in the <code>onmouseover-function</code> of the <code>&lt;use&gt;</code> i run into problems:</strong></p>
  
  <p>I tried the following different approaches to retrieve the values:</p>
  
  <pre><code>function showInfo(evt){
  
      console.log("target: "+evt.target);
      console.log("AttrNS: "+evt.target.getAttributeNS(null,"x"));
      console.log("Attrib: "+evt.target.getAttribute("x"));
      console.log("basVal: "+evt.target.x.baseVal.value);
      console.log("corrEl: "+evt.target.correspondingUseElement.x.baseVal.value);
  </code></pre>
  
  <p>producing the following output:</p>
  
  <pre><code>    //target -&gt; ** [object SVGUseElement] in FF, in all other browsers: [object SVGElementInstance])
      //AttrNS -&gt; Works only in FF
         // * Uncaught TypeError: Object #&lt;SVGElementInstance&gt; has no method 'getAttributeNS'
      //Attrib -&gt; Works only in FF
         // * Uncaught TypeError: Object #&lt;SVGElementInstance&gt; has no method 'getAttribute'
      //basVal -&gt; works only in FF
         // * Uncaught TypeError: Cannot read property 'baseVal' of undefined
      //corrEl -&gt; fails in FF but works in Ch, O and IE
  </code></pre>
  
  <p>Browsers:FF10, Ch16, O11.61, IE9</p>
  
  <p><strong>Question:</strong></p>
  
  <p>Why is <code>getAttribute()</code> failing in the other browsers? Am I missing something important? Is there a consistent way to retrieve the values <strong>crossbrowser</strong>?  (Besides via a switch between <code>evt.target.x</code> and <code>evt.target.correspondingUseElement.x</code>)</p>
  
  <p><em>important: vanilla js only, and I know about browserswitches, thats not the point! I'll provide a fiddle if needed, as soon as i find the time. Finally - thank you for reading this!</em></p>
  
  <p>EDIT: * added the js-errors</p>
  
  <p>EDIT2: ** FF returns another Object than the other browsers</p>