Блог

У меня есть группа svg из 5 элементов, таких как;

 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] , потому что он находится на 3-м индексе myGroup .

Теперь я хочу удалить элемент со 2-го индекса, а затем добавить какой-то другой элемент с тем же индексом, поэтому я использовал 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>