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的访问权限？即。如果是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

<svg> ， <path> 等是 SVGAnimatedString 对象，而jQuery本身无法生成它们，因为正在使用createElement函数来创建标签。简单的jQuery破解看起来像：

enter image description here

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

当然，为了您的个人需要，您可以在此黑客中扩展SVG标签的数量：

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

Answer 2

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

Answer 3

我已经在jQuery中使用了SVG，并且无需在jQuery核心库中更改任何内容。您只需生成如下所示的svg标记

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

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

Answer 4

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

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

4 个答案: