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!");
        }
    }
});

如何在svg元素中添加一个圆圈

1 个答案: