Php 无法在传单地图v1.6.0中加载SVG图标背景图像

我有一系列动态生成的SVG图标，用作传单地图上的标记

图标将

r

编号插入图像中；当浏览器直接引用图标时，此功能非常有效，但是，当图标放置在传单系统中时，图标背景图像不会显示；但我不明白为什么会这样：

SVG： 及

但实际显示的只是文本编号（4），没有背景图像

直接调用时，背景图像加载正常
当浏览器直接调用SVG（PHP）时，它会正确加载
文本显示在正确的位置，这意味着正在读取SVG

我试过什么？

• 向上面显示的
  /
  标记中添加了各种标题（如viewbox等）
• 绝对URL
• 阅读
• 在SVG中使用单引号和双引号，因为XML是特定于引号类型的

图像：
标记在传单地图上的外观。

传单在浏览器检查器中的显示方式。

标记与直接URL在浏览器中的显示方式。这应该是它在地图上的显示方式

---

通过传单，SVG背景图像似乎没有加载。为什么？

使用以下代码，我在传单地图上绘制了SVG图标。在SVG代码中，您可以输入您的号码

var map=L.map（'map'{
中间：[18.520,73.856]，
缩放：3，
});
//创建平铺层并将其添加到地图
var tiles=new L.tillelayer（'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'）。addTo（map）；
var iconSVG='.c{fill:#fff；字体大小：120px；字体重量：粗体；}9'；
L.标记（[18.520,73.856]{
图标：L.divIcon({
html:iconSVG，
类名：“”
})
}).addTo（地图）
.bindPopup（'我是SVG图标'）
.openPopup（）；

#地图{
宽度：500px；
高度：400px；
}

---

在解决此问题没有任何进展之后；我查看了其他调用，并对将外部图像文件作为base64数据块而不是外部文件引用导入进行了调整

<image xlink:href='data:image/png;base64,iVBOIGlkPSJ...etc, etc....IyMDRUgg==' x='0px' y='0px' width='20px' height='25px' />

---

这是有效的。

您是否检查了

https://domain.co.uk/images/map_icons/bronze5_20.png

？我不确定SVG图像中嵌入的光栅图像在这种特殊情况下应该如何工作。@IvanSanchez检查后，没有，似乎没有引用外部PNG文件。您好，谢谢。您的icon SVG结构看起来与我的非常不同。你能对此提出建议吗？@Martin基本上我们将图标图像url传递给

iconUrl

，但在您的情况下，您需要传递编码的SVG字符串

iconUrl

。但标记自定义的最佳简单方法是使用

L.divIcon

。它支持html和css类。使用我的SVG，标记自定义非常简单。您可以在文本/数字中传递标记颜色。有许多网站可用于生成标记或任何SVG图标。重要的一点是SVG的加载速度比图像图标快，并且不会因为获取每个图标而命中服务器。希望这能澄清您的观点。谢谢。我可以将其用作外部SVG文件吗要引用，否则有数百个svg，页面将变得一团糟！？@Martin即使你使用外部页面引用，它也会加载到你正在使用的页面。我正在使用svg绘制5个以上的lac+标记，没有性能问题。对于我使用的群集。不要为每个图标创建静态单独的svg，在创建/打印时动态创建它与静态图像图标相比，最好的方法是：在SVG中，你可以动态地改变任何东西（颜色、大小、文本等）

 var Brnz4 = L.icon({
            iconUrl: '/images/map_icons/bronze.php?r=4',
            iconSize:     [20, 25], // size of the icon
            iconAnchor:   [0, 25], // point of the icon which will correspond to marker's location
            popupAnchor:  [0, -20] // point from which the popup should open relative to the iconAnchor
        });

L.marker([56.224800000000000,-2.703890000000000], {icon:Brnz4} ).addTo(map)

<image xlink:href='data:image/png;base64,iVBOIGlkPSJ...etc, etc....IyMDRUgg==' x='0px' y='0px' width='20px' height='25px' />