Criar e acessar tag SVG com jQuery?
É possível criar uma tag SVG no jQuery assim:
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>');
E, em caso afirmativo, como se obtém acesso ao DOM? ie. Se fosse HTML, faria o seguinte:
return dragSVG.html();
Mas como não é HTML isso lança uma exceção ... Ou estou sentindo falta de algo completamente fundamental!?
EDITAR:
Vou tentar explicar o que estou tentando alcançar um pouco mais claramente; Eu tenho um botão que representa um "item" do SVG que pode ser arrastado para uma tela principal do SVG. Quando o usuário começar a arrastar, eu quero exibir o 'item' do SVG sob o mouse para fornecer feedback ao usuário. Quando o usuário coloca isso na tela, preciso mover o 'item' para a tela principal.
$('#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);
}
});
});