title: Getting 'xlink:href' attribute of the SVG <image> element dynamically using JS in HTML DOM
body: <p>I have a construction:</p>
  
  <pre><code>&lt;div id="div"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg"&gt;
          &lt;image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"&gt;&lt;/image&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to get <code>pic.jpg</code> url and I need to begin from the most outer div, not exactly from the source <code>&lt;image&gt;</code> element:</p>
  
  <pre><code>var div = document.getElementById("div");
  var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
  var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
  var url = img.getAttribute('xlink:href');   // Please pay attention I do not use getAttributeNS(), just usual getAttribute()
  
  alert(url);     // pic.jpg, works fine
  </code></pre>
  
  <p>My question is what is the right way to get such kind of attributes from element like SVG and its children?</p>
  
  <p>Because before I tried to do this way and it also worked fine in Chrome (I didn't try other browsers):</p>
  
  <pre><code>var svg = div.getElementsByTagName('svg')[0];   // I do not use NS
  var img = svg.getElementsByTagName('image')[0];
  var url = img.getAttribute('xlink:href');  // and do not use getAttributeNS() here too
  
  alert(url);     // pic.jpg, works fine
  </code></pre>
  
  <p>But when I tried to use <code>getAttributeNS()</code> I got blank result:</p>
  
  <pre><code>var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
  var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
  
  // Please pay attention I do use getAttributeNS()
  var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href'); 
  
  alert(url);     // but I got black result, empty alert window
  </code></pre>