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

可以在jQuery中创建一个SVG标记，如下所示：

var dragSVG = $(''); dragSVG.append(''); 

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

 return dragSVG.html(); 

但是因为它不是HTML，所以引发exception…或者我错过了一些完全基本的东西！？

编辑：

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

  $('#testBtnDrag').draggable({ opacity: 0.7, revert: 'invalid', cursorAt: { top: 0, left: 0}, helper: function (event) { var dragSVG = ''; 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 
 tag that wraps the . $('#drawArea').droppable({ accept: '.svg-item', drop: function (event, ui) { // Get the mouse offset relative to the  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本质上是一种XML文件格式。 请尝试使用parseXML（） 。 如果这不起作用，请尝试http://keith-wood.name/svggraphRef.html 。

Answer 2

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

  // line 526 in jquery-XXXjs, 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 = $(" 

当然，为了您的个人需要，您可以扩展此hack中SVG标记的数量：

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

Answer 3

我已经使用了jQuery的SVG，并且没有必要在jQuery核心库中更改任何内容。 你只需要生成如下的svg标签

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

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