javascript - 如何更改 URI 编码的 SVG 样式？

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):解码 -> 更改样式 -> 编码？在不同的事件中，我想设置样式、轮廓、填充、显示/隐藏隐藏路径等等，以使该标记更具表现力/交互性/值(value)。当然我可以应用 CSS filter 来改变它的颜色，但它太基础了。我需要独立地与每个路径或内部 SVG 样式类进行交互。

Answer 1

添加带有 img 标签的 svg 有什么特别的原因吗？以下是我使用 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>