javascript - 附加子项不能在两个圆圈中工作

Question

当我添加两个圆圈时，没有任何结果。以下是我的代码。第一个创建的圆圈附加到组中就可以了。但是附加在已创建的圆圈中的下一个小圆圈什么也没显示。我不知道出了什么问题。如有任何建议，我将不胜感激。对不起我的英语。

function drawCirc(x, y, r, id) {

var circ = document.createElementNS(svgURI, 'circle');
circ.setAttributeNS(null, 'cx', x);
circ.setAttributeNS(null, 'cy', y);
circ.setAttributeNS(null, 'r', r);
circ.setAttributeNS(null, 'fill', '#CCFFCC');
circ.setAttributeNS(null, 'stroke', '#6BC1C8');
circ.setAttributeNS(null, 'stroke-width', '5');
circ.setAttribute('id', id);

// to add small circle
var circStart = document.createElementNS(svgURI, 'circle');
circStart.setAttributeNS(null, 'cx', (x-5));
circStart.setAttributeNS(null, 'cy', (y-10));
circStart.setAttributeNS(null, 'r', 8);
circStart.setAttributeNS(null, 'fill', 'blue');
circStart.setAttributeNS(null, 'stroke', '#E6F1DB');
circStart.setAttributeNS(null, 'stroke-width', '2');

document.getElementById(group).appendChild(circ);

document.getElementById(id).appendChild(circStart);}

Answer 1

您不能在 SVG 中嵌套圆形(或任何其他形状)。您需要将它们设为容器的所有子容器，例如 <g>或<svg>元素。

在您的情况下，您可能希望将代码的最后一行更改为

document.getElementById(group).appendChild(circStart);}