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

Posted 2023-03-28

【中文标题】从 snap svg 组中的相同位置删除和添加元素

【英文标题】：Remove and add elements from same position in snap svg group

【发布时间】：2021-08-11 23:51:34

【问题描述】：

我有 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 索引。

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

【问题讨论】：

在 DOM 中有 .replaceWith 但我不知道 Snap 将如何处理它：developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith

Snap.svg 元素抛出错误，说 myGroup[2].replaceWith 不是函数

【参考方案1】：

您可以使用insertAfter 或insertBefore 方法来实现这一点。

示例：

如果您喜欢用索引 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>

【讨论】：

就我而言，它应该是canvas.path('M 100 110 l 30 35').attr(stroke: '#050' ).insertAfter(myGroup[2]); 参考：http://snapsvg.io/docs/#Element.insertAfter。顺便说一句，它解决了我的问题。谢谢

@kapilsarwat 更新了解决方案