title: Why is this code applying to the body tag instead of target?
body: <p>I'm using a jQuery UI widget based plugin to apply SVG via Raphael to an element - instead of applying to the inside of the element I've selected using this code...</p>
  
  <pre><code>$('#red-dial').dial({
    barColor: '#F1858F',
    barValue: 26
  });​
  </code></pre>
  
  <p>...it seems to be adding the SVG content just before the closing BODY tag. This is strange as within my plugin logging 'this.element' to the console shows the correct HTML item #red-dial is selected, and the same code was working before I converted it into a widget plugin.</p>
  
  <p>Anyone know why this could be? Sure it's probably a dumb error on my part!</p>
  
  <p>Full JSFiddle of all the code: <a href="http://jsfiddle.net/vQJng/4/" rel="nofollow">http://jsfiddle.net/vQJng/4/</a></p>
  
  <p>Update: I've figured out that the script is inserting the SVG after the script file I call the widget from. For instance if I put the code:</p>
  
  <pre><code>$('#red-dial').dial({
    barColor: '#F1858F',
    barValue: 26
  });
  </code></pre>
  
  <p>in the end of the widget file, the SVG is inserted the line after the widgets script file tag.</p>