javascript - 如何将圆添加到 svg 元素

Question

我正在尝试将圆动态地放入 svg 中。在 index.html 文件中，我创建了这个 svg 部分。

<svg id="svgArea" width="500" height="500"></svg> 

在 js 文件中我尝试了这个

$('#svgArea').append('<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />');

这似乎不起作用。

尝试了下面的代码，但找不到如何应用 cx、cy、r ...

var crcl= document.createElement("CIRCLE");
$('#svgArea').append(crcl);

我想要实现的是在单击按钮时动态创建 n 个圆圈。在另一个按钮上，一个一个地单击删除按钮。

Answer 1

我已经设法找到了解决方案，这里是该方法的一个最小示例。但为了更灵活，我建议使用图书馆。看看 fiddle 演示(您必须向下滚动才能看到该按钮)。

HTML

<svg id="svgArea" width="500" height="500"></svg>
<button id="addCircle">Add a circle</button>

JS

var x = 50;
var y = 50;
var xMax = $('#svgArea').width();
var yMax = $('#svgArea').height();

$("#addCircle").click(function () {
    var existingContent = $('#svgArea').html();
    var toInsert = '<circle cx="' + x + '" cy="' + y + '" r="40" stroke="green" stroke-width="4" fill="yellow" />';
    $('#svgArea').html(existingContent + toInsert);
    if ((x + 100) <= xMax) {
        x += 100;
    } else {
        if ((y + 100) <= yMax) {
            y += 100;
            x = 50;
        } else {
            alert("There is no place inside the canvas!");
        }
    }
});