小编ach*_*hen的帖子

Leaflet.js 地图中的 SVG 图标

我有一个有效的 Leaflet 地图,但无法使用 encodeURI 传递 SVG 图标(没有尝试过 encodeURIComponent 因为我不确定这是问题所在)。我正在使用的要点显示了如何传入 SVG 矩形,这很有效:

<svg xmlns='http://www.w3.org/2000/svg'> <rect> x='0' y='0' width='20' height='10' fill='#000000' </rect> </svg> 
Run Code Online (Sandbox Code Playgroud)

但是,即使代码有效,在 SVGOMG 中进行了优化,并且在 SVG linters(例如 SVG Viewer)上正确显示,我也无法成功传递圆圈或路径。例如,一颗星星。

<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/></svg>
Run Code Online (Sandbox Code Playgroud)

CodePen 上有一个例子,相关的代码行是:

var svgicon ="<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/></svg>"

var url = encodeURI("data:image/svg+xml," + svgicon).replace(/%20/g, ' ').replace(/%22/g, "'").replace(/%3C/g,'<').replace(/%3E/g,'>');
console.log(url);
Run Code Online (Sandbox Code Playgroud)

您可以在控制台中看到 SVG 路径。

"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 …
Run Code Online (Sandbox Code Playgroud)

javascript svg leaflet

7
推荐指数
1
解决办法
7215
查看次数

标签 统计

javascript ×1

leaflet ×1

svg ×1