【问题标题】：Can not load SVG icon background image in Leaflet Map v1.6.0Leaflet Map v1.6.0 无法加载 SVG 图标背景图片
【发布时间】：2020-02-27 01:57:38
【问题描述】：

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

图标采用r 编号并将其插入图像中；当图标被浏览器直接引用时，这非常有效，但是，当图标放置在 Leaflet 系统中时，图标背景图像不会显示；但我不知道为什么会这样：

SVG：

/***
 * Create an SVG file using the Bronze image and apply a text as given by PHP GET clause.
 ***/
$rank = (int)$_GET['r'];
if($rank < 1 ) {
    $rank = null;
}
header("content-type: image/svg+xml");
?>
<?xml version='1.0' encoding='utf-8'?>
<svg  version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 25' xml:space='preserve' height='25' width='20'>
<image xlink:href='https://domain.co.uk/images/map_icons/bronze5_20.png' x='0' y='0' width='20' height='25' />
<text id='svgtext' x='50%' y='40%' dominant-baseline='middle' text-anchor='middle' fill='black' font-size='11px'><?php print $rank;?></text>
</svg>

传单（v1.6 当前）：

 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)

但实际显示的只是没有背景图像的文本编号 (4)。

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

我尝试了什么？

为<svg>/<xml> 标签添加了各种标题，如上图所示（例如视图框等）。
绝对网址
阅读this post
在 SVG 中使用单 ' 和双 " 引号，以防 XML 是特定于引号类型的。

图片：

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

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

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

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

【问题讨论】：

你检查过https://domain.co.uk/images/map_icons/bronze5_20.png是否有网络请求吗？我不确定嵌入在 SVG 图像中的光栅图像在这种特殊情况下应该如何工作。
@IvanSanchez 检查后，没有似乎没有引用外部 PNG 文件。

标签： php svg leaflet

【解决方案1】：

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

var map = L.map('map', {
    center: [18.520, 73.856],
    zoom: 3,
});

// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png').addTo(map);
var iconSVG='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="37" viewBox="0 0 234 366.52"> <defs><style>.c{fill:#fff;font-size:120px;font-weight: bold;}</style></defs><g transform="translate(-1206 -293)"><path style="fill:#3b9906!important;" d="M117,366.52c-7.256-61.169-34.171-117.764-76.2-160.731a117,117,0,1,1,152.4-.005c-42.023,42.97-68.945,99.57-76.2,160.736Z" transform="translate(1206 293)"></path><text class="c" transform="translate(1288 460)"><tspan x="0" y="0">9</tspan></text></g></svg>';
 L.marker([18.520, 73.856], {
                        icon: L.divIcon({
                            html: iconSVG,
                            className: ''
                        })
                    }).addTo(map)
         .bindPopup('I am SVG Icon')
         .openPopup();

#map {
  width: 500px;
  height: 400px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>


<div id="map"></div>

希望这会对你有所帮助。

【讨论】：

您好，谢谢。你的图标 SVG 结构看起来和我的很不一样。您能就此提出建议吗？
@Martin 基本上我们将图标图像 url 传递给 iconUrl 但在您的情况下，您需要传递编码的 svg 字符串 iconUrl。但标记自定义的最佳简单方法是使用 L.divIcon leafletjs.com/reference-1.6.0.html#divicon 。支持 html 和 css 类。使用我的 SVG，标记自定义非常容易。您可以在文本/数字内传递标记颜色。有许多网站可用于生成标记或任何 svg 图标。重要的一点是 svg 加载速度比图像图标快，并且不会为获取每个图标而访问服务器。希望这能澄清你的观点。
谢谢。我可以将其用作外部 SVG 文件来引用吗，否则页面会因为数百个 SVG 而变得一团糟！？
@Martin 即使您使用外部页面引用，它也会加载到您正在使用的页面。我正在用 svg 绘制超过 5 个 lac+ 标记而没有性能问题。对于集群我使用github.com/SINTEF-9012/PruneCluster。不要为每个图标创建静态单独的 SVG，在创建/绘制标记时动态创建它。与静态图像图标相比，最好的事情是：在 SVG 中，您可以动态更改任何内容（颜色、大小、文本等）

【解决方案2】：

在解决这个问题没有任何进展之后；我查看了替代调用，并调整了将外部图像文件导入为 base64 数据块而不是外部文件引用。

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

这行得通。

【讨论】：