Leaflet.js中的SVG圖

Question

我有一個工作單張地圖，但無法使用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>" 

什麼也沒有顯示，也沒有錯誤信息。有時，一個破碎的圖像鏈接出現。

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

你開始在2111絕對（中號）OVE聲明這是畫布之外的路徑。接着是一個相對的（h）水平線300向右。 Then you relative（l）ines -242.7,176.3 92.7，-285.3 92.7,285.3 before you clo（Z）e path。

如果我將畫布設置爲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 
// }); 

正如我剛纔錘打成的代碼工作這一點我沒有調整好大小，但你可以看到星星在這裏畫...