Javascript 使用jQuery创建和访问SVG标记？

是否可以在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>');

但由于它不是HTML，这会引发一个异常。。。还是我遗漏了一些基本的东西

编辑：

我将试着更清楚地解释我想要实现的目标；我有一个按钮，它表示一个SVG“项”，可以拖到主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);
        }
      });

  });

$（'testBtnDrag'）。可拖动({
不透明度：0.7，
还原：“无效”，
游标：{top:0，left:0}，
助手：函数（事件）{
var dragSVG=''；
返回dragSVG；
}              
});
//我不能直接将可拖放标签附加到SVG标签上，IE/FF不适用于此
//因此，我们必须将其附加到一个标签上，该标签将。
$（“#绘图区域”）。可拖放({
接受：'.svg项'，
drop：函数（事件、用户界面）{
//获取鼠标相对于画布的偏移量
var posX=event.originalEvent.clientX-$（this）.offset（）.left；
var posY=event.originalEvent.clientY-$（this.offset（）.top；
//获取拖动的元素并将其放到“主”画布上
var rawSVG=ui.helper.children（）.html（）//这行不通！
var maincavas=$（“#绘图区域>svg”）；
maincavans.append（rawSVG）；
}
});
});

SVG本质上是一种XML文件格式。请尝试parseXML（）。如果这不起作用，试试看 .

A

，

等都是svorganizatedString对象，jQuery本身无法生成它们，因为正在使用

createElement

函数创建标记。 jQuery的简单破解如下所示：

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

---

我在jQuery中使用了SVG，不需要在jQuery核心库中进行任何更改。您只需生成如下所示的svg标记

var svg=$（''）.attr（'xmlns'，''）

使用jquery并通过
$（'body'）.html（svg）将其添加到dom中jQuery然后将其视为dom对象，您可以在此标记上调用任何与dom相关的方法，就像您可以添加属性一样。您可以将var svg保留在全局范围内，以便用于进一步参考，还可以分配id或类属性，以便使用jQuery访问它。
不要攻击jQuery；只需创建一个简单的单行函数，创建一个SVG元素并将返回的元素包装到JQuery中，然后就可以在其上使用任何JQuery函数，即：

    function createSvg(tagName) {
        return document.createElementNS("http://www.w3.org/2000/svg", tagName);
    }
    function sayHi() { 
        alert('hi'); 
    }
    $(document).ready(function() {
        var svg = $(createSvg("svg"))
            .attr('width', 500)
            .attr('height', 500);
        $('body').append(svg);
        var rect = $(createSvg("rect"))
            .attr("id","rect1")
            .attr("x","20")
            .attr("y","150")
            .attr("height","72")
            .attr("width","120")
            .attr("rx","20")
            .attr("stroke","black")
            .attr("fill","white");
        $("svg").append(rect);
        $("#rect1").on("click", sayHi);
        $("#rect1").attr("x",150);
    });

ParseXML允许我在XML上使用jQuery函数，就像它是html一样，但我认为它不允许我访问“原始”DOM，是吗？看我上面的编辑。我还是有点困惑。您所谓的SVG画布实际上是一个，您正在将您的画布绘制到画布上移动的另一个画布上？抱歉，我不想通过深入到细节来混淆问题，但我使用Raphael SVG库在id为“drawArea”的标记内创建“主画布”。因此，虽然您的答案在遍历主画布元素时非常有用，但我仍然不知道如何从ui.helperWell中获取标记，我不知道Raphael库，但也许您可以坚持使用更简单的方法？看看这里，这是我写的一些游戏。svg图像直接编码到网页中。如果将鼠标移到聊天信息上，我会使用simple getElementById（）在轨迹周围移动气泡图像。我不确定这些是否对您有帮助，但请看一看。您可以在那里看到的所有
svg
标记的列表：+1，但有些信息告诉我，直接编辑jquery源代码可能不是解决此问题的最佳方法。这只是一个有趣的轻量级技巧，类似于实验，仅供私人使用。当然，这不是商业用途！我想在生产环境中，您应该创建一个简单的函数，可以称之为
$svg
，它接受一个svg标记，创建svg DOM元素，然后将其包装到一个jQuery对象中。这不起作用，因为如果使用XHTML命名空间创建svg，它将不会呈现。
parsed[1] == "svg" || parsed[1] == "path" || parsed[1] == "line" || etc. ...   

    function createSvg(tagName) {
        return document.createElementNS("http://www.w3.org/2000/svg", tagName);
    }
    function sayHi() { 
        alert('hi'); 
    }
    $(document).ready(function() {
        var svg = $(createSvg("svg"))
            .attr('width', 500)
            .attr('height', 500);
        $('body').append(svg);
        var rect = $(createSvg("rect"))
            .attr("id","rect1")
            .attr("x","20")
            .attr("y","150")
            .attr("height","72")
            .attr("width","120")
            .attr("rx","20")
            .attr("stroke","black")
            .attr("fill","white");
        $("svg").append(rect);
        $("#rect1").on("click", sayHi);
        $("#rect1").attr("x",150);
    });