将两个 snap svg 组组合成一个组

Posted 2023-03-28

【中文标题】将两个 snap svg 组组合成一个组

【英文标题】：Combining two snap svg groups into one single group

【发布时间】：2021-08-19 06:44:34

【问题描述】：

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

这里是code on JSFiddle

有人知道如何实现吗？

【参考方案1】：

使用 SnapSVG，您不使用节点

这意味着您的 g1 和 g2 是 Snap 对象

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

文档：http://snapsvg.io/docs/#Element.node

SnapSVG 的优点是您可以链接方法

工作代码：

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

<svg id="Canvas" ></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>