javascript - 如何更改 URI 编码 SVG 的样式?
问题描述
在 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):解码->更改样式->编码吗?在不同的事件中,我想设置样式、轮廓、填充、显示/隐藏隐藏路径等,以使该标记更具表现力/交互性/有价值。当然我可以应用 CSSfilter
来改变它的颜色,但它太基础了。我需要独立地与每个路径或内部 SVG 样式类进行交互。
解决方案
您添加带有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>
推荐阅读
- angular - Angular - 证书错误 - net::ERR_CERT_AUTHORITY_INVALID -
- mysql - Mysql 存储过程 - 选择并更新同一张表的多行
- php - 在注销时为登录用户保留购物车中的物品,并且其他人在注销时无法看到用户的购物车
- python - Python AIOHTTP 在返回响应后立即发送请求
- angular - 如何访问注入到组件中的 formControl?
- mixed-models - 混合模型重复测量 (MMRM)
- cassandra-3.0 - 为什么 Cassandra SERIAL 操作在 RF3 上的 QUORUM 操作上需要 3 个副本
- random - Java 8 中的 java.util.Random 使用哪种伪随机数生成器算法?
- python - 提高 Django 日志查询时间精度
- python - 如何断开自定义事件 python-socketio