时间戳

首页 > 解决方案 > 从 snap svg 组中的相同位置删除和添加元素

javascript - 从 snap svg 组中的相同位置删除和添加元素

问题描述

我有 5 个元素的 snap svg 组，例如；

let canvas = Snap('#svg');
let myGroup = canvas.g();

myGroup.add(canvas.rect(100, 200, 110, 220).attr({fill: '#000'}));
myGroup.add(canvas.circle(400, 400, 50).attr({fill: '#500'}));

// want to remove this element later
myGroup.add(canvas.rect(100, 200, 50, 60).attr({fill: '#050'}));

myGroup.add(canvas.text(50, 100, 'Some Text').attr({stroke: '#005'}));
myGroup.add(canvas.rect(700, 200, 110, 220).attr({fill: '#055'}));

然后我可以访问使用索引的特定元素myGroup，例如，如果我想更改我可以使用的文本属性，myGroup[3]因为它位于myGroup.

现在我想删除第二个索引处的元素，然后在同一索引处添加一些其他元素，所以我使用了remove()类似的方法；

myGroup[2].remove();
myGroup.add(canvas.path('M 100 200 l 30 35').attr({stroke: '#050'}));

但问题是；第 3 和第 4 索引处的元素向上移动（分别为第 2 和第 3）并且新元素已添加到第 4 索引。

有谁知道如何在同一索引处添加元素？

标签： javascripthtmlsvgsnap.svg

解决方案

您可以使用insertAfterorinsertBefore方法来实现这一点。

例子：

如果您喜欢用索引 2 替换画布组中的节点。使用remove方法删除节点。

myGroup[2].remove();

insertBefore并使用方法插入新节点

canvas.path('M 100 110 l 30 35').attr({
   stroke: '#050'
}).insertBefore(myGroup[2]);

这将用新节点替换旧节点。

示例解决方案： 

let canvas = Snap('#svg');

let myGroup = canvas.g();

myGroup.add(canvas.rect(100, 110, 110, 220).attr({
  fill: '#000'
}));
myGroup.add(canvas.circle(400, 400, 50).attr({
  fill: '#500'
}));

// want to remove this element later
myGroup.add(canvas.rect(100, 110, 50, 60).attr({
  fill: '#050'
}));

myGroup.add(canvas.text(50, 100, 'Some Text').attr({
  stroke: '#005'
}));
myGroup.add(canvas.rect(700, 200, 110, 220).attr({
  fill: '#055'
}));

function replaceElement() {
  myGroup[2].remove();
  canvas.path('M 100 110 l 30 35').attr({
    stroke: '#050'
  }).insertBefore(myGroup[2]);
}
#svg {
  width: 500px;
  height: 500px;
}

button {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js" integrity="sha512-Gk+uNk8NWN235mIkS6B7/424TsDuPDaoAsUekJCKTWLKP6wlaPv+PBGfO7dbvZeibVPGW+mYidz0vL0XaWwz4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<button onclick="replaceElement()">replace</button>
<svg id="svg"></svg>

推荐阅读