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

我沒有調整大小，因為我將其敲定為一段工作代碼，但是您可以看到此處繪制的星星...