Create and access SVG tag with jQuery?

Question

Is it possible to create an SVG tag in jQuery like so:

var dragSVG = $('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
dragSVG.append('<rect x="0" y="0" width="20" height="20" style="fill:red"></rect>');

And then if so, how does one get access to the DOM? ie. If it were HTML I'd do the following:

return dragSVG.html();

But as it isn't HTML this throws an exception... Or am I missing something completely fundamental!?

EDIT:

I'll try to explain what I'm try to achieve a bit more clearly; I have a button that represents an SVG 'item' that can be dragged onto a main SVG canvas. When the user starts dragging I want to display the SVG 'item' under the mouse to provide user-feedback. When the user drops this onto the canvas I need to move the 'item' onto the main canvas.

      $('#testBtnDrag').draggable({
          opacity: 0.7,
          revert: 'invalid',
          cursorAt: { top: 0, left: 0},
          helper: function (event) {
              var dragSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect x="0" y="0" width="20" height="20" style="fill:red"></rect></svg>';
              return dragSVG;
          }              
      });

      // I can't attach the droppable to the SVG tag directly, IE / FF don't work with this
      // so we have to attach it to a <div> tag that wraps the <svg>.
      $('#drawArea').droppable({
        accept: '.svg-item',
        drop: function (event, ui) {
          // Get the mouse offset relative to the <svg> canvas
          var posX = event.originalEvent.clientX - $(this).offset().left;
          var posY = event.originalEvent.clientY - $(this).offset().top;

          // Get the dragged element and put it onto the "main" canvas
          var rawSVG = ui.helper.children().html()  // This won't work!
          var mainCanvas = $('#drawArea > svg');
          mainCanvas.append(rawSVG);
        }
      });

  });

Answer 1

I have used SVG with jQuery and there is no need to change anything within jQuery core library. You simply need to generate svg tag like below

var svg = $('<svg></svg>').attr('xmlns','http://www.w3.org/2000/svg');

with jquery and add this to dom via $('body').html(svg); jQuery then treats it a dom object and you can call any dom related methods on this tag like you can add attributes etc. You can keep the var svg in global scope so you can use for further reference and also you can assign an id or class attribute so you can access it using jquery.

Answer 2

A <svg>, <path> etc. are SVGAnimatedString objects, and jQuery itself can not produce them, because is using createElement function for tags creation. Simple hack of jQuery looks like:

    // line 526 in jquery-X.X.X.js, in my case it is jquery-1.9.1.js   
    // Single tag
    if ( parsed ) {
        // ----------------------------------------------------
        var xml_html_element;
        if ( parsed[1] == "svg" || parsed[1] == "path" ) {
            xml_html_element = context.createElementNS( "http://www.w3.org/2000/svg", parsed[1] );
        } else {
            xml_html_element = context.createElement( parsed[1] );
        }
        return [xml_html_element];
        // ----------------------------------------------------
        //return [ context.createElement( parsed[1] ) ];

    }

Now, you can use jQuery like:

var $svg = $("<svg>").attr({'version': "1.1"});
var $path = $("<path>").attr({
    'd': 'M' + 10 + ',' + 100 + ' C' + 200 + ',' + 150 + ' ' + 200 + ',' + 170 + ' ' + 300 + ',' + 250,
    'fill': "none",
    'stroke': "rgba(100,100,100,0.9)",
    'stroke-width': "1"
});
var $body = $("body");
$body.append($svg.append($path));

Of course, for your personal necessary you may expand the number of SVG tags in this hack:

parsed[1] == "svg" || parsed[1] == "path" || parsed[1] == "line" || etc. ...   

Answer 3

SVG is essentially an XML file format. Try parseXML() instead. If this doesn't work try http://keith-wood.name/svggraphRef.html.