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

您是否有任何特殊原因要添加带有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>

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

1 个答案: