LenovoId
@LenovoId
I want, women not to get sick

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

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

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

https://codepen.io/topicstarter/pen/WNpeQLK
  • Вопрос задан
  • 83 просмотра
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Ну так вы сначала в одну строку собираете все изображения в images.forEach, а потом эту строку вставляете во все контейнеры в item.forEach.
Обходите каждый .item, внутри ищите img и манипулируйте только им.
Ответ написан
@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>
  `;
});

Все остальное вроде как у вас лишнее.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы