<分区>
是否可以像这样在 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 Canvas 上。当用户开始拖动时，我想在鼠标下方显示 SVG“项目”以提供用户反馈。当用户将它放到 Canvas 上时，我需要将“项目”移动到主 Canvas 上。
$('#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);
}
});
});
