title: Accessing SVG file directly from Javascript code
body: <p>I have this HTML code, which is invoking my javascript code. The code is for a gauge. In the javascript code, I am trying to access a SVG file, and modifying the needle (of the gauge) to display the desired value. The code is working fine. However, I do not wish to call "object id" in HTML. I want to access SVG file through javascript directly, instead of using object id in HTML. I tried using el.setAttribute('data', 'gauge.svg');   But then svg_doc isn't able to retrieve the SVG image and modify the needle. Any help would be highly appreciated.</p>
  
  <p>PS : I tried my best to be as thorough in explaining the problem. However, please let me know if I am unclear somewhere.</p>
  
  <p>This is Gauge.png image which is embedded in the svg code I have pasted below <a href="https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg" rel="nofollow">https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg</a></p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;g name="gauge" width="122px" height="127px"&gt;
          &lt;image xlink:href="gauging.png" width="122" height="127"/&gt;
      &lt;circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none"&gt;
          &lt;animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
          values="none;#f88;#f00;#f88;none;" repeatCount="0"/&gt;
      &lt;/circle&gt;
          &lt;g id="needle" transform="rotate(0,62,62)"&gt;
              &lt;circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/&gt;
              &lt;rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/&gt;
              &lt;polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/&gt;
          &lt;/g&gt;
          &lt;text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"&gt;&lt;/text&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>HTML+Javascript code</strong></p>
  
  <pre><code>    &lt;head&gt;
      &lt;title&gt;SVG Gauge example&lt;/title&gt;
  
      &lt;script&gt;
      function update1(){
          var scale=100;
          var value;
          var value1 = 69;
  
          var el=document.getElementById('gauge1');       
          if (!el) return;
  
          /* Get SVG document from HTML element */
          var svg_doc = el.contentDocument;
          if (!svg_doc) return;
  
  
          /* Rotate needle to display given value */
          var needle_el = svg_doc.getElementById('needle');
          if (!needle_el) return;
          /* Calc rotation angle (0-&gt;0%, 260-&gt;100%) */
          value = parseInt(value1);
          scale = parseInt(scale);
          if (value &gt; scale) value = scale;
          var angle = value / scale * 260;
          /* On-the-fly SVG transform */
          needle_el.setAttribute('transform','rotate('+angle+',62,62)');
      }
  document.addEventListener('load', update1, true);
      &lt;/script&gt;
  
      &lt;/head&gt;
  
  &lt;div&gt;
  &lt;object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/&gt;
  &lt;/div&gt;
  
  
  &lt;/html&gt;
  </code></pre>