如何使用javascript将svg元素插入到组中

Question

我在HTML中嵌入了一些SVG代码，我需要使用javascript将几个多边形添加到现有的SVG中。问题是存在的SVG（我正在添加）在一个组（g标签）中，并且由于分层，我需要将新多边形添加到该组中的特定位置。我已经写了几年javascript，但我刚开始学习SVG，而且我不知道如何使用javascript将元素添加到SVG DOM中的特定位置。我在下面的评论解释了为什么这与之前提出的问题不同。

例如：

<g id="group1">
    <rect x="20" y="50" width="700" height="20" fill="url(#grad1)"/>
    I need to add polygons here.
    <rect x="20" y="140" width="700" height="20" fill="url(#grad1)"/>
</g>

Answer 1

使用Node.insertBefore：

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

     

如果referenceNode为null，则newNode将插入子节点列表的末尾。