内联 SVG 文本 (js)

Question

我想在完全由 js 定义的 SVG 中显示文本。 SVG 图片按预期显示，但文本却没有。 我已经在在线 SVG 查看器中尝试了实际的 SVG 定义，它具有相同的结果：图片很好，但没有显示文本。

我在 js 中创建以下字符串，然后将其用作 Google 地图中的 AdvancedMarkerElementmarker 中的内容。

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;

Answer 1

它是可见，但你的svg太小了，没有空间容纳文字！ :)

我调整了尺寸，终于可以看到文字了：

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="200" viewBox="0 0 50 10" > 

<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>