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短绒毛绒（例如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"/>

您可以在画布之外的2,111处以绝对（ M ）ove声明开始路径。 随后是右侧的（ h ）相对原始线300。 然后，相对的（L）INES -242.7,176.3 92.7，-285.3 92.7,285.3你CLO（Z）之前Ë路径。

如果将画布设置为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
// });

我没有调整大小，因为我将其敲定为一段工作代码，但是您可以看到此处绘制的星星...