Czy możliwe jest utworzenie tagu SVG w jQuery tak:

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>');

A jeśli tak, to jak uzyskać dostęp do DOM? to znaczy. Gdyby był to HTML, zrobiłbym następujące czynności:

return dragSVG.html();

Ale ponieważ nie jest to HTML, powoduje to wyjątek ... A może brakuje mi czegoś całkowicie podstawowego !?

EDYTOWAĆ:

Spróbuję wyjaśnić, co staram się osiągnąć nieco wyraźniej; Mam przycisk reprezentujący „element” SVG, który można przeciągnąć na główny obszar roboczy SVG. Gdy użytkownik zaczyna przeciągać, chcę wyświetlić element „SVG” pod myszą, aby przekazać informacje zwrotne od użytkownika. Gdy użytkownik upuści go na płótno, muszę przenieść „element” na główne płótno.

      $('#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);
        }
      });

  });