将两个 snap svg 组合并为一个组

Combining two snap svg groups into one single group

我有两个 snap svg 组 grp1grp2。现在我想把这两个组合并成一个组。我试过 append()appendTo()prepend()prependTo(),但他们都以一种或另一种方式将一个组添加到另一个组中。

这里是code on JSFiddle

有人知道如何实现吗?

使用 SnapSVG,您不是使用节点

这意味着您的 g1g2 是 Snap Objects

要使用像 append 这样的 DOM 方法,您需要更深入地挖掘才能访问节点

SnapSVG 的优势在于您可以链接 方法

工作代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

<svg id="Canvas" height="100"></svg>


<script>
let canvas = Snap('#Canvas');

let g1 = canvas.g()
               .add(canvas.rect(10, 10, 80, 60).attr({fill: 'green'}))
               .add(canvas.circle(150, 60, 40 ).attr({fill: 'gold'}));
let g2 = canvas.g()
               .add(canvas.circle(150, 60, 20 ).attr({fill: 'red'}));

g1.node.append(...g2.node.children);
g2.remove();

document.body.append(canvas.node.innerHTML)
</script>