JS定义内嵌SVG文本不显示问题求助（Google Maps AdvancedMarkerElement）

我在纯JS定义的SVG里尝试显示文本，图形能正常渲染，但文本始终不显示。在线SVG查看器测试结果一致：图形正常，文本无输出。我编写了如下SVG字符串，用于Google Maps的AdvancedMarkerElement标记内容：

SVGstring = '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-3 -49 52 52" > <style>svg { margin-top: 3px margin-bottom: 3px margin-right: 3px margin-left: 3px}</style> <path  stroke="black" stroke-width="3" d="m 0,0 l 0,-25 l 23,0 l 7,-20 l 7,20 l 3,0 l 0,25 z" fill="#9494ff"  /><text x="20" y="35" font = "20px sans-serif" fill="black" >999</text></svg>'

设置标记内容的代码：

pinSvg = document.createElement('pinSvg');
pinSvg.innerHTML = SVGstring; 
marker.content = pinSvg;

1. 调整文本位置到viewBox范围内 #

你的SVG viewBox是-3 -49 52 52，可见区域的y轴范围是从-49到-49+52=3。文本的y="35"完全超出了这个范围，所以看不到。把y值改成viewBox内的数值，比如y="-10"：

<text x="20" y="-10" ... >999</text>

2. 修正字体属性写法 #

SVG的<text>元素推荐分开使用font-size和font-family属性，避免解析兼容问题：

<text x="20" y="-10" font-size="20" font-family="sans-serif" fill="black" >999</text>

3. 替换自定义元素为正确的SVG解析方式 #

用document.createElement('pinSvg')创建自定义元素可能导致SVG解析异常，改用DOMParser直接解析SVG字符串：

const parser = new DOMParser();
const svgDoc = parser.parseFromString(SVGstring, 'image/svg+xml');
const pinSvg = svgDoc.documentElement;
marker.content = pinSvg;

修改后的完整SVG字符串示例 #

SVGstring = '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-3 -49 52 52" > <style>svg { margin: 3px; }</style> <path stroke="black" stroke-width="3" d="m 0,0 l 0,-25 l 23,0 l 7,-20 l 7,20 l 3,0 l 0,25 z" fill="#9494ff" /><text x="20" y="-10" font-size="20" font-family="sans-serif" fill="black">999</text></svg>'

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