React-Leaflet中多十六进制颜色的EncodeURI SVG图标失效问题

问题场景 #

在React-Leaflet开发中，为Marker使用URI编码的自定义SVG图标时，仅单个元素用十六进制颜色（如#D7629B）时图标正常显示：

var stopCircleSvg = 
  '<svg xmlns="http://www.w3.org/2000/svg" width="67" height="67">'+ 
  '<g>' +
    '<circle id="1" cx="34" cy="34" r="3" stroke="#D7629B" stroke-width="1.5" fill="none"/>' +
    '<circle id="2" cx="34" cy="34" r="1" fill="red" />' +
  '</g>' + 
'</svg>';

var url = encodeURI("data:image/svg+xml," + stopCircleSvg).replace("#", "%23");
var CustomIcon = Icon.extend({
  options: {
    iconSize: [stopCircleSize, stopCircleSize],
    iconAnchor: [stopCircleSize / 2, stopCircleSize / 2],
  },
});
// 使用示例
icon={
  new CustomIcon({ iconUrl: url })
}

但当多个元素使用十六进制颜色时，SVG图标直接失效：

var stopCircleSvg = 
  '<svg xmlns="http://www.w3.org/2000/svg" width="67" height="67">'+ 
  '<g>' +
    '<circle id="1" cx="34" cy="34" r="3" stroke="#D7629B" stroke-width="1.5" fill="none"/>' +
    '<circle id="2" cx="34" cy="34" r="1" fill="#D7629B" />' +
  '</g>' + 
'</svg>';
var url = encodeURI("data:image/svg+xml," + stopCircleSvg).replace("#", "%23");

问题原因 #

replace("#", "%23")默认只会替换第一个匹配到的#字符，当SVG中有多个十六进制颜色时，剩下的#没有被转义，导致URI格式不合法，浏览器无法正确解析SVG内容。

解决方法 #

将替换操作改为全局替换，通过正则表达式的g标志匹配所有#：

var url = encodeURI("data:image/svg+xml," + stopCircleSvg).replace(/#/g, "%23");

这样所有的十六进制颜色前缀#都会被转义为URI合法的%23，SVG就能正常渲染了。

内容的提问来源于stack exchange，提问作者Shakedk