使用 jQuery 创建和访问 SVG 标签？

Question

是否可以像这样在 jQuery 中创建一个 SVG 标签：

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

如果是这样，如何访问 DOM？IE。如果是 HTML，我会执行以下操作：

return dragSVG.html();

但由于它不是 HTML，这会引发异常......或者我是否错过了一些完全基本的东西！？

编辑：

我将尝试更清楚地解释我想要实现的目标；我有一个代表 SVG 'item' 的按钮，可以将其拖到主 SVG 画布上。当用户开始拖动时，我想在鼠标下显示 SVG 'item' 以提供用户反馈。当用户将它放到画布上时，我需要将“项目”移动到主画布上。

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

一<svg>，<path>等被SVGAnimatedString对象，并且因为使用jQuery本身不能产生他们，createElement功能标签的创建。jQuery 的简单 hack 看起来像：

    // 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] ) ];

    }

现在，您可以像这样使用 jQuery：

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

当然，出于个人需要，您可以在此 hack 中扩展 SVG 标签的数量：

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