如何在Google Maps内联SVG自定义标记中使用十六进制颜色代码？

我之前也踩过这个一模一样的坑！问题核心出在data URI里的#字符——#在URI中是锚点标识符，浏览器会把它后面的内容当成URI的片段部分，而不是SVG代码的一部分，直接导致你的SVG被解析成错误格式，标记自然就显示不出来了。

至于green这类颜色名称能生效，是因为它不含任何URI特殊字符，SVG代码能被完整正确地解析。

修复方案 #

把SVG中fill属性里的#替换成URI转义后的%23即可，具体修改你的代码如下：

var icon = { 
  url: 'data:image/svg+xml;utf-8, \
    <svg width="30" height="48" viewBox="1 -10 60 78" xmlns="http://www.w3.org/2000/svg"> \
      <path fill="%2300492C" d="M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z"></path> \
    </svg>' 
};

额外提示 #

如果你的SVG里还有其他URI特殊字符，也要记得做好转义：

• &转成&
• 空格可以转成%20或者用+代替
• 双引号如果和外层引号冲突，也可以换成单引号包裹属性值（比如fill='#00492C'，不过转义#还是更通用的做法）

这样修改后，你的深绿色标记应该就能正常显示啦！

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