Почему выводятся 16 изображений?

Question

[Максим]

Делаю подмену тега img на тег svg

Но столкнулся с не понятным для меня, почему выводятся 16 изображений вместо 4х ?

https://codepen.io/topicstarter/pen/WNpeQLK

Answer 1

[Алексей Уколов]

Ну так вы сначала в одну строку собираете все изображения в images.forEach, а потом эту строку вставляете во все контейнеры в item.forEach.
Обходите каждый .item, внутри ищите img и манипулируйте только им.

Answer 2

[VladimirAsmo]

const urls = [...]

let items = document.querySelectorAll(".grid .item");

items.forEach(function (el, id) {
  el.innerHTML = `
<svg viewBox="0 0 155 219"  xmlns="http://www.w3.org/2000/svg">
 <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="black"></rect>
      <circle cx="80" cy="120" r="60" fill="white" stroke="#c00" stroke-width="10" />
      <circle cx="50" cy="60" r="40" fill="white" stroke="#c00" stroke-width="10" />
    </mask>     
 </defs>
  <image href=" ${urls[id]} " width="100%" height="100%" x="0" y="0" 
  preserveAspectRatio="none" mask="url(#mask)"/>
</svg>
  `;
});

Все остальное вроде как у вас лишнее.

Comments

[Максим]

спасибо ... я не догадался до такого

[VladimirAsmo]

Максим Ленский, это нормально. Первое решение незнакомой задачи часто выходит странное, тут главный секрет в том, чтобы после первой реализации перечитать код и подумать о том, как можно сделать по другому, как сделать оптимальнее.

[Максим]

VladimirAsmo, там массив с src для картинок написан просто так, мне просто лень было писать в html src и потому я написал в js , в идеале href для image в svg должен был взят из тега img и только потом подмениться то есть вот так я вас всех запутал и сам запутался :)) спасибо ...

[VladimirAsmo]

Максим Ленский, тогда вы можете сделать что-то вроде:

const urls = [...]

let images = document.querySelectorAll(".grid .item img");

images.forEach(function (it) {
  it.parentNode.innerHTML = `
<svg viewBox="0 0 155 219"  xmlns="http://www.w3.org/2000/svg">
 <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="black"></rect>
      <circle cx="80" cy="120" r="60" fill="white" stroke="#c00" stroke-width="10" />
      <circle cx="50" cy="60" r="40" fill="white" stroke="#c00" stroke-width="10" />
    </mask>     
 </defs>
  <image href=" ${it.src} " width="100%" height="100%" x="0" y="0" 
  preserveAspectRatio="none" mask="url(#mask)"/>
</svg>
  `;
});

[Максим]

VladimirAsmo, parentNode = вот что то новое увидел - спасибо