Как изменить стиль для SVRI в кодировке URI?

Question

В LeafletJS я хочу использовать значок SVG с динамическим текстом в нем.

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');
    

Итак, я получаю хороший маркер, где пользовательский текст является частью SVG.

Эти пользовательские данные позже могут быть довольно сложными.Так что я использую простой пример там.В браузере мы получаем что-то вроде этого:

Теперь вопрос ... как применять внешние стили для hover, mousedown, mouseover, click или любые другие события?Нужно ли использовать сторону клиента (JS): декодирование -> изменить стиль -> кодирование?На разных мероприятиях я хочу стилизовать, обрисовывать, заполнять, отображать / скрывать скрытые пути и так далее, чтобы сделать этот маркер более выразительным / интерактивным / ценным.Конечно, я могу применить CSS filter, чтобы изменить его цвет, но он слишком простой.Мне нужно независимо взаимодействовать с каждым путем или внутренним классом стиля SVG.

Answer 1

Есть ли какая-то особая причина, по которой вы добавляете svg с тегом img?Вот как я могу сделать это с 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>