Q:

How to change style for URI encoded SVG?

In LeafletJS i want to use SVG icon with dynamic text in it.

let svgicon = `<svg id='marker` + markers[i][4] + `' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>
        <defs>
          <style>
            .cls-1 {
              fill: #006aff;
            }      
            .cls-2 {
              font-size: 28px;
              fill: #fff;
              font-family: Montserrat-Regular, Montserrat;
            }
          </style>
        </defs>
        <path class="cls-1" d="M56.9679,24.9679A24.9679,24.9679,0,1,0,12.38928,40.42236h-.00067l18.4848,22.96552a1.38676,1.38676,0,0,0,2.22162.10583l17.86951-22.285H50.963A24.86853,24.86853,0,0,0,56.9679,24.9679Z"/>
        <text id='label` + markers[i][4] + `' class='cls-2' transform='translate(32 34)' text-anchor='middle'>` + markers[i][1] + `</text>
</svg>`

let url = encodeURI('data:image/svg+xml;charset=utf8,' + svgicon).replace('#','%23');
    

So i end up with nice marker where custom text is part of SVG.

That custom data later could be pretty complicated. So i use simple example there. In browser we end up with something like this:

Now the question is... how to apply external styles for hover, mousedown, mouseover, click or any other events?
Do i need to use client side (JS): decoding -> change style -> encoding?
On different events i want to style, outline, fill, to display/hide hidden paths and so on to make that marker more expressive/interactive/valuable. Sure i can apply CSS filter to change its color but it is too basic. I need to interact with each path or internal SVG style class independently.

A:

Is there any particular reason you're adding svg with img tag? Here's how I'd do it with SVG:

const markers = [
  ['', '69', '', '', '1'],
  ['', '12', '', '', '2'],
  ['', '195', '', '', '3'],
];

const targetForMarkers = document.getElementById('target');
// batch to get more performance out of this
let batch = document.createElement('div');

markers.forEach(marker => {
  let wrapper = document.createElement('div');
  wrapper.innerHTML = getIcon(marker);

  // add event listeners like this
  wrapper.addEventListener('click', (e) => {
    console.log('clicked:', e.target.id);
  });

  batch.append(wrapper);
});

targetForMarkers.append(batch);



// template
function getIcon(marker) {
  return `<svg id='marker` + marker[4] + `' class='marker' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>
        <path class="background" d="M56.9679,24.9679A24.9679,24.9679,0,1,0,12.38928,40.42236h-.00067l18.4848,22.96552a1.38676,1.38676,0,0,0,2.22162.10583l17.86951-22.285H50.963A24.86853,24.86853,0,0,0,56.9679,24.9679Z"/>
        <text id='label` + marker[4] + `' class='text' transform='translate(32 34)' text-anchor='middle'>` + marker[1] + `</text>
</svg>`;
}
.marker {
  width: 50px;
  cursor: pointer;
}

.marker:hover .background {
  fill: #ec6161;
}

.background {
  fill: #006aff;
  pointer-events: none;
}

.text {
  font-size: 28px;
  fill: #fff;
  font-family: Montserrat-Regular, Montserrat;
  pointer-events: none;
}
<div id="target"></div>

