假设这个:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
为什么我什么都没看到？
是否可以像这样在 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 'item' 的按钮，可以将其拖到主 SVG 画布上。当用户开始拖动时，我想在鼠标下显示 SVG 'item' 以提供用户反馈。当用户将它放到画布上时，我需要将“项目”移动到主画布上。
$('#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 …