[英]Remove and add elements from same position in snap svg group
我有 5 个元素的 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 索引。
有谁知道如何在同一索引处添加元素?
您可以使用insertAfter
或insertBefore
方法来实现这一点。
例子:
如果您喜欢从 canvas 组中替换索引为 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.