Leaflet.js中的SVG图标映射

时间:2017-07-14 19:07:53

标签: javascript svg leaflet

我有一个工作的Leaflet地图但是无法使用encodeURI传递SVG图标(还没有尝试过encodeURIComponent,因为我不确定这是不是问题)。我使用的gist显示了如何传入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链接上正确显示,我也无法成功传入圆圈或路径。例如,一个明星。

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

example is on 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>"

没有显示任何内容,也没有错误消息。有时会出现损坏的图像链接。

1 个答案:

答案 0 :(得分: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 )orizo​​ntal line 300。 然后在路径( Z )之前相对( l )ines -242.7,176.3 92.7,-285.3 92.7,285.3。

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

enter image description here

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

我没有调整大小,因为我只是把它打成了一段代码,但你可以看到星星在这里画了......

enter image description here