单张中的彩色SVG图标

我在传单中添加了一个SVG图标，如下所示：

var myIcon = L.icon({
  iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z"/></svg>`,
});

this.myMarker = L.marker([50.505, 30.57], { icon: myIcon }).addTo(map);

var myIcon=L.icon({
iconUrl:`data:image/svg+xml，`，
});
this.myMarker=L.marker（[50.505,30.57]，{icon:myIcon}）；

它正如期出现：

现在，当您按如下方式向SVG添加颜色时，图标将在地图中消失：

  iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z" fill="#fdbf00"/></svg>`,

iconUrl:`data:image/svg+xml，`，

---

对此有何想法？

我准备了一个示例，而不是

iconUrl

我使用了

html

，这样你就可以轻松地使用十六进制颜色了；）

//配置映射
让配置={
minZoom:7，
maxZomm:18，
};
//地图开始时的放大率
常数zoom=13；
//坐标
常数lat=52.237049；
常数lon=21.017532；
//呼叫地图
const map=L.map（'map'，config.）.setView（[lat，lon]，zoom）；
//用于在地图上加载和显示平铺层
//大多数磁贴服务器都需要属性，您可以在“图层”下设置属性`
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
常量svgTemplate=`
`;
常量图标=L.divIcon({
类名：“标记”，
html:svgTemplate，
iconSize:[40,40]，
iconAnchor:[12,24]，
popupAnchor:[7，-16]
});
常量标记=L.标记（[lat，lon]{
图标：图标
})
.bindPopup（“#F7FADA”）
.addTo（地图）
*{
保证金：0；
填充：0
}
html{
身高：100%
}
身体，
html，
#地图{
身高：100%；
保证金：0；
填充：0
}
身体{
身高：100%；
}
为了更容易再现，我将其放在一个文件夹中。我认为
#
会让XML解析器窒息，但用
rgb（1,2,3）
语法替换颜色定义会使图标显示为黑色。我使用它将svg转换为内联。请参见
。
替换为
%23
，因此在您的情况下，它应该看起来像
填充='%23fdbf00'
。我用不同的方式创建彩色标记。不通过iconUrl只通过html，然后我使用我可以毫无问题地使用十六进制颜色-无论您用
#
替换什么。它完全忽略了颜色。A尝试了一些虚拟数据，如
stroke=“%662dewqdwewfdbf00”
。图标显示为黑色。