Leaflet.js 地图中的 SVG 图标

Question

我有一个有效的 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> 

但是，即使代码有效，在 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>

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

您可以在控制台中看到 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 92.7,285.3 z' fill='#000000'/></svg>"

什么都没有显示，也没有错误信息。有时，会显示损坏的图像链接。

Answer 1

你能在浏览器中显示那个 svg 吗？我认为 SVG 路径不是很好。

您定义一个 50(px) x 50(px) svg 画布。

<path d="
M2,111
h300
l-242.7,176.3
   92.7,-285.3
   92.7,285.3
Z
" fill="#000"/>

您以绝对 ( M )ove 声明开始路径，该声明位于画布之外的 2,111。紧随其后的是右侧的相对 ( h ) 水平线 300。然后相对 ( l )ines -242.7,176.3 92.7,-285.3 92.7,285.3 在你 clo( Z )e 路径之前。

如果我将画布设置为 1000 * 1000，我会在浏览器中看到这个图标。这是你想看到的吗？

我在 LeafletJS 中这样绘制：

let achenSvgString = "<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/></svg>"
let myIconUrl = encodeURI("data:image/svg+xml," + achenSvgString).replace('#','%23');

// L.icon({
//     iconUrl: myIconUrl,
//     iconSize: 40
// });

我没有调整大小，因为我只是将其敲入了一段有效的代码，但您可以在这里看到星星...