Закраска картинки png/svg. Задание границ покраски

Question

Есть такая картинка

На страницу нужно добавить функцию изменения ее цвета. Она полностью прозрачная. И закрасить ее background-color не составляет проблем.
Но есть одна проблема, по периметру картинки идут небольшие толщиной в 2 пикселя выступления. При закраске красится все - получается бордер своего рода.
Нужно же закрашивать только то, что внутри картинки.
Не могу понять, как можно избавиться от него.
Из-за определенных скриптов код может иметь вид только такой:

<div class="image"> <img src style class> </div>

Т.е. без object, iframe и прочего.

Answer 1

Создайте подложку, подгоните ее по размерам и вот будет решение. Немного колхозный пример, который должен показать суть:

console.clear();

let buttons = Array.from(document.querySelectorAll('.button'));

buttons.forEach(i=>{
  let val = i.dataset.value;
  i.addEventListener('click',i=>{
    document.querySelector('.color').style.background = val;
  })
})

.bg{
  display: inline-block;
  width: max-content;
  margin: 0 auto;
  position: relative;
}

.color{
  content:'';
  display: block;
  position: absolute;
  width: calc(100% - 32px);
  height: calc(100% - 50px);
  top: 24px;
  left: 12px;
}

img{
  opacity: 0;
}

img + img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 3;
}


img{
  mix-blend-mode: darken
}

<button class="button" data-value="red">red</button>
<button class="button" data-value="green">green</button>
<button class="button" data-value="blue">blue</button>
<br>
<div class="bg">
  <div class="color" style="background: green"></div>
  <img src="https://i.stack.imgur.com/7uTy9.png" alt="">
  <img src="https://i.stack.imgur.com/7uTy9.png" alt="">
</div>

БЛОГ НА HUSL

Закраска картинки png/svg. Задание границ покраски

Ответы (1 шт):