使用 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 '项目' 的按钮，可以将它拖到主 SVG 画布上。当用户开始拖动时，我想在鼠标下显示 SVG“项目”以提供用户反馈。当用户将它放到画布上时，我需要将“项目”移动到主画布上。

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

不要破解 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);
    });

Answer 2

我已经将 SVG 与 jQuery 一起使用，无需在 jQuery 核心库中进行任何更改。您只需要生成如下所示的 svg 标签

var svg = $('<svg></svg>').attr('xmlns','@987654321@');

使用 jquery 并通过 $('body').html(svg); jQuery 将其添加到 dom 然后将其视为 dom 对象，您可以在此标记上调用任何与 dom 相关的方法，就像您可以添加属性等一样。您可以将 var svg 保持在全局范围内，这样您可用于进一步参考，您还可以分配 id 或 class 属性，以便您可以使用 jquery 访问它。

Answer 3

一个<svg>、<path>等都是SVGAnimatedString对象，jQuery本身不能产生它们，因为是使用@ 987654325@ 用于创建标签的功能。 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. ...   

Answer 4

SVG 本质上是一种 XML 文件格式。请改用 parseXML()。如果这不起作用，请尝试 http://keith-wood.name/svggraphRef.html.