javascript - 将两个 snap svg 组组合成一个组
问题描述
我有两个 snap svg 组grp1
和grp2
. 现在我想把这两组合并成一个组。我试过append()
, appendTo()
, prepend()
,prependTo()
但他们都以一种或另一种方式在另一个组中添加一个组。
有谁知道如何实现这一目标?
解决方案
使用 SnapSVG,您不使用节点
这意味着你的g1
和g2
是捕捉对象
要使用 DOM 方法append
,您需要更深入地挖掘才能访问节点
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>
推荐阅读
- reactivesearch - 放置 ReactiveBase 的最佳位置或您可以拥有多少个
- xml - 如何根据列表索引条件使用 XSLT 提取 XML?
- java - 自定义链表实现的插入方法?
- flutter - 如何创建有界可滚动的 TabBarView
- python - 使用pyqt5逐步绘制的正确方法
- linux - sh shell下的数组(不是bash)
- javascript - 在 github API 上访问 github 存储库的正确端点是什么?
- python - 加入每个组中的字符串并分配回原始 DataFrame
- css - mat-prefix 用于输入而不是标签
- typescript - TypeScript Transform 查找命名函数并在外部插入代码