Топик с подобным же названием не подходит так как не вариант: Практическое применение SVG mask
Интересует именно применение некой маски к обычному html тегу img и так же не интересует анимация маски и прочее что не относится к телу вопроса
Я хочу применить маску SVG к неизвестному количеству изображений но выходит не понятка, изображений не видно, прилогаю код
img {
display: block;
max-width: 100%;
}
.grid {
width: 480px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
margin: auto;
}
.grid-item img {
mask: url(#mask);
}
<svg viewBox="0 0 155 219" width="155" height="219" style="display: none;">
<defs>
<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect width="100%" height="100%" fill="#000" />
<circle cx="90" cy="90" r="60" fill="#fff" stroke="red" stroke-width="10"/>
<circle cx="50" cy="50" r="40" fill="#fff" stroke="red" stroke-width="10"/>
</mask>
</defs>
</svg>
<div class="grid">
<div class="grid-item">
<img src="https://images.unsplash.com/photo-1619732802548-bfa614fef77b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
</div>
<div class="grid-item">
<img src="https://images.unsplash.com/photo-1619782472846-eba4e6fb2275?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
</div>
<div class="grid-item">
<img src="https://images.unsplash.com/photo-1619641046270-29a0b73d7a9f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
</div>
<div class="grid-item">
<img src="https://images.unsplash.com/photo-1619787942043-99ae128ca5c1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=375&q=80" alt="">
</div>
<div class="grid-item">
<img src="https://images.unsplash.com/photo-1619785938189-264b15dc1694?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
</div>
</div>Что надо сделать что бы заработало mask из css ?
Вот такого поведения я хочу добиться
let svg = document.querySelectorAll(".grid svg");
let svgImage = document.querySelectorAll(".grid svg image");
svg.forEach(function(el) {
el.setAttribute("viewBox", "0 0 155 219");
el.setAttribute("xmlns", "http://www.w3.org/2000/svg");
});
svgImage.forEach(function(el) {
el.setAttribute("x", 0);
el.setAttribute("y", 0);
el.setAttribute("width", "100%");
el.setAttribute("height", "100%");
el.setAttribute("preserveAspectRatio", "none");
el.setAttribute("mask", "url(#mask)");
});
.mask {
position: fixed;
top: 0;
left: 0;
opacity: 0;
}
.grid {
width: 480px;
margin: 30px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}<svg viewBox="0 0 155 219" xmlns="http://www.w3.org/2000/svg" width="155" height="219" class="mask">
<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>
</svg>
<div class="grid">
<div class="grid-item">
<svg>
<image href="https://images.unsplash.com/photo-1619783534896-ae45ba5c78d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
</svg>
</div>
<div class="grid-item">
<svg>
<image href="https://images.unsplash.com/photo-1619732514485-2f6896f9e34c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
</svg>
</div>
<div class="grid-item">
<svg>
<image href="https://images.unsplash.com/photo-1619732802548-bfa614fef77b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
</svg>
</div>
<div class="grid-item">
<svg>
<image href="https://images.unsplash.com/photo-1619782472846-eba4e6fb2275?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
</svg>
</div>
</div>
