Leaflet.js地图中的SVG图标 [英] SVG icons in Leaflet.js map

问题描述

我有一个工作正常的Leaflet映射，但是无法使用encodeURI传递SVG图标(尚未尝试encodeURIComponent，因为我不确定这是问题所在).我正在使用的要点演示了如何在SVG矩形中传递，并且有效:

I have a working Leaflet map but cannot pass in SVG icons using encodeURI (have not tried encodeURIComponent because I'm not sure that is the issue). The gist I'm using shows how to pass in SVG rectangles and this works:

<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)上正确显示，我也无法成功通过圆圈或路径.例如，星星.

However, I cannot pass in a circle or a path successfully, even though the code is valid, optimized in SVGOMG, and appearing properly on SVG linters such as SVG Viewer. For example, a star.

<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上有一个示例，相关的代码行是:

An example is on CodePen and the relevant lines of code are:

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路径.

You can see the SVG path in the console.

"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>"

没有任何显示，也没有错误消息.有时会出现损坏的图像链接.

Nothing shows up and there is no error message. Sometimes, a broken image link shows up.

推荐答案

可以在浏览器中显示该svg吗?我认为SVG路径格式不正确.

Can you display that svg in a browser? I don't think the SVG path is well formed.

您定义了一个50(px)x 50(px)的svg画布.

You define a 50(px) x 50(px) svg canvas.

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

您可以在画布之外的2,111处以绝对( M )声明声明开始路径.右边是相对( h )原始线300. 然后，相对( l )设置为-242.7,176.3 92.7，-285.3 92.7,285.3，然后克隆( Z )路径.

You start the path with an absolute (M)ove declaration at 2,111 which is outside of the canvas. Followed by a relative (h)orizontal line 300 to the right. Then relative (l)ines -242.7,176.3 92.7,-285.3 92.7,285.3 before you clo(Z)e the path.

如果将画布设置为1000 * 1000，我将在浏览器中看到此图标.这是您想看到的吗?

If I set the canvas to 1000 * 1000 I see this icon in the browser. Is this what you would like to see?

我像这样在LeafletJS中绘制它:

I draw this in LeafletJS like so:

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

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

I didn't adjust the size as I just hammered this into a working bit of code but you can see the stars drawing here...

这篇关于Leaflet.js地图中的SVG图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！