如何使d3子元素粘在右上角或主SVG上

Question

我有以下d3 javascript函数来绘制图形。我希望子元素粘贴到主元素的右上角**首先“rect”**元素调整大小时。由于SVG不能相互嵌套，我怎样才能使它们粘在“rect”元素的右上角。

BusinessInteractionFigure.prototype.paint = function(g) {
g.attr('data', 'BusinessInteractionFigure');
// main element
g.append('rect')
 .attr('x', Figure.OFFSET)
.attr('y', Figure.OFFSET)
.attr('rx', 12)
.attr('ry', 12)
.attr('width', 100%)
.attr('height',100%)
.attr('stroke', 'rgb(178,178,126)')
.attr('stroke-width', 1)
.attr('fill', 'rgb(255,255,181)');
// arc 1 (right)
g.append("path")
.attr("d", "M 115,10 A 5,5, 0, 1, 1, 115,20")
.attr("fill", "none")
.attr("stroke","black")
.attr("stroke-width",1);
// line 1 (right)
g.append("line")
.attr("x1",115)
.attr("y1",10)
.attr("x2",115)
.attr("y2",20)
.attr("stroke","black")
.attr("stroke-width",1);
// arc 2 (left)
g.append("path")
.attr("d", "M 112,10 A 5,5, 0, 0, 0, 112,20")
.attr("fill", "none")
.attr("stroke","black")
.attr("stroke-width",1);
// line 2 (left)
g.append("line")
.attr("x1",112)
.attr("y1",10)
.attr("x2",112)
.attr("y2",20)
.attr("stroke","black")
.attr("stroke-width",1);
};

每个子元素的X和Y值可能需要以每当调整“rect”大小的方式设置。子元素仍然坚持元素的右上角。

调整大小之前的样子：

调整大小后的样子：