Javascript 传单图例中的SVG圆形元素

我想知道在传单图例中添加SVG圆圈的最简单方法。我不需要它来更新大小，我只需要一个具有指定半径（大小并不重要）和指定颜色的圆。我有三个不同的地图图层，每个图层上显示不同的彩色点

我有三个复选框，可以在其中切换这些层，我希望每个复选框下面都显示一个不同颜色的圆圈，以指示正在打开/关闭的层。下面是我为复选框编写的脚本，我可以得到一个圆圈，显示为SVG元素。但是，我不希望它附加到“面板”，而是希望在每个复选框下（或旁边）附加三个单独的SVG。这是我的密码：

$('#panel').append('<input type="checkbox" id="checkboxCity3" class="Cities3" id="showResidents" value="true" checked="checked" style="-moz-box-shadow: 0px 10px 14px -7px #383838; -webkit-box-shadow: 0px 10px 14px -7px #383838; box-shadow: 0px 10px 14px -7px #383838; background-color:#FFF; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; display:inline-block; cursor:pointer; color:#000000; font-family:avenir; font-size:10px; font-weight:bold; padding:8px 14px; text-decoration:none;">Show Residents</button>');
    $('#panel').append('<input type="checkbox" id="checkboxCity" class="Cities" id="showFellows" value="true" checked="checked" style="-moz-box-shadow: 0px 10px 14px -7px #383838; -webkit-box-shadow: 0px 10px 14px -7px #383838; box-shadow: 0px 10px 14px -7px #383838; background-color:#FFF; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; display:inline-block; cursor:pointer; color:#000000; font-family:avenir; font-size:1px; font-weight:bold; padding:8px 14px; text-decoration:none;">Show Fellows</button>');
    $('#panel').append('<input type="checkbox" id="checkboxCity2" class="Cities2" id="showResidentFellows" value="true" checked="checked" style="-moz-box-shadow: 0px 10px 14px -7px #383838; -webkit-box-shadow: 0px 10px 14px -7px #383838; box-shadow: 0px 10px 14px -7px #383838; background-color:#FFF; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; display:inline-block; cursor:pointer; color:#000000; font-family:avenir; font-size:1px; font-weight:bold; padding:8px 14px; text-decoration:none;">Show Residents/<br>Fellows</button>');
    d3.select('#panel').append("svg").attr("width", 60).attr("height", 60).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");

---

提前谢谢

这是因为HTML

input

元素不允许包含内容。见参考资料：

允许的内容：无，为空元素

---

发生这种情况的原因是HTML

input

元素不允许包含内容。见参考资料：

允许的内容：无，为空元素

      d3.select('#checkboxCity3').append("svg").attr("width", 60).attr("height", 60).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");