Changing image color partially with mask

Question

i have an image(marker) for map, i need to change color scheme depending on data which i get. I try to use mask-image to cover image with patern and color it, guess i did smth wrong, is there any way to do it without downloading images with different colors.
Inner icon:

Result i need to achive:

I tried to use such masks, first two are png, and 3 one is svg:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 40 52" xmlns="http://www.w3.org/2000/svg">
<path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-dashoffset: 1px; stroke-width: 0px;" d="M 20.946 51.817 C 10.713 43.246 3.804 33.213 1.433 22.624 C -0.406 14.397 3.88 7.137 14.292 0.844 C 15.759 -0.043 19.7 0.385 26.24 1.298 C 28.303 1.586 31.522 3.442 33.851 5.838 C 36.849 8.917 38.738 12.772 38.548 14.094 C 38.483 14.574 39.33 19.601 38.978 22.082 C 38.086 28.373 38.008 23.023 37.518 22.77 C 35.029 21.486 28.843 10.752 29.337 13.09 C 29.337 13.09 30.241 13.646 28.478 11.864 C 28.478 11.864 27.497 10.787 26.513 10.047 C 25.267 9.114 23.458 8.631 22.85 8.367 C 20.053 7.16 16.907 8.18 13.958 10.098 C 13.958 10.098 8.152 14.306 10.169 23.533 C 11.085 27.713 17.317 30.691 19.612 30.613 C 24.104 30.461 27.391 29.864 30.116 24.2 C 30.408 23.592 31.712 21.959 31.905 20.026 C 32.213 16.94 28.503 11.89 29.092 11.812 C 30.757 11.591 40.573 21.59 38.247 23.558 C 38.482 25.947 38.561 24.793 38.316 27.736 C 37.797 33.962 29.758 44.365 20.946 51.817 Z"/>
</svg>

And results i get using this masks:

Code i use to set mask

<img class="icon-wraper" src="botAdded.png"/>

.icon-wraper{
  -webkit-mask-image: url("./POIwraper.svg");
  mask-image: url("./POIwraper.svg");
  mask-size: cover;
}

I realy have no idea what problem with it and how to change achive that result.

Why don't you change the src of the image to other image when data is what you expected? — Manas Khandelwal, Mar 29 '21 at 08:49
I wanted to do so first, but there a lot of different markers, i need to color them all or use some king of mask, plus i may need to use different color not only 3 types for each. — Mykola Rushchenko, Mar 29 '21 at 08:57
But then where (HTML/ CSS/ JS) and how will you differentiate... — Manas Khandelwal, Mar 29 '21 at 09:02
I added html and css i use, there no problem with data defenition, the real problem is color changing, this why i wrote here. — Mykola Rushchenko, Mar 29 '21 at 09:05
For reference: https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css might solve your problem — JensV, Mar 29 '21 at 09:09
In the case where the SVG is actually embedded in the HTML (and not linked via `img`) you can actually just style it via CSS — JensV, Mar 29 '21 at 09:10

score 0 · Accepted Answer · answered Apr 11 '21 at 12:16

Well because i use react-leaflet, i found such component as divIcon, this let me use html components as i want,not only default img, so here is code that describes icon right now

<Marker
  position={coordinates}
  icon={
    divIcon({
      html:`
      <div class="leaflet-div-icon-wraper">
        <img class="wraper_icon" src="${image}" />
        <svg class="svg_filler" viewBox="0 0 40 55" xmlns="http://www.w3.org/2000/svg">
          <path style="fill: ${chosenemmissionsStats?chosenemmissionsStats.color:'grey'}; stroke: rgb(0, 0, 0); paint-order: stroke;" d="M 19.742 52.481 C 19.35 52.248 18.131 52.182 16.788 50.942 C 15.401 49.661 14.267 48.988 13.077 47.734 C 11.293 45.855 10.319 44.263 9.121 42.344 C 5.898 37.183 2.623 32.147 1.758 25.723 C 1.22 21.729 0.502 17.489 1.721 13.391 C 3.248 8.256 6.509 4.389 12.588 2.157 C 13.066 1.982 14.057 1.564 14.609 1.472 C 15.143 1.383 15.752 1.299 16.256 1.151 C 21.974 -0.523 27.779 0.952 34.097 6.63 C 37.688 9.857 39.355 15 39.127 20.994 C 38.933 26.087 39.102 31.087 35.405 36.007 C 37.668 32.5 25.365 54.955 19.716 52.365 C 18.622 51.863 30.639 29.002 29.861 27.599 C 29.864 27.599 30.627 26.058 31.425 23.619 C 32.146 21.415 33.086 17.55 30.789 13.627 C 29.632 11.652 27.689 9.557 25.593 8.408 C 23.982 7.525 22.01 7.32 20.447 7.505 C 18.226 7.768 16.089 8.043 14.533 8.742 C 13.397 9.252 11.812 10.129 10.421 11.136 C 9.579 11.746 9.003 13.211 8.631 14.522 C 8.32 15.616 8.256 16.698 8.122 17.938 C 7.787 21.042 8.564 24.565 10.941 27.718 C 12.408 29.664 15.125 30.955 17.804 31.57 C 21.789 32.485 25.982 31.036 29.742 27.499 C 32.037 25.34 35.748 33.857 35.748 33.857"/>
        </svg>
      </div>
      `,
})}>

I made svg and change its color depending from few params that i count according to some data.

Changing image color partially with mask

1 Answers1