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