如何在javascript中的svg对象中添加文本

Question

如何在javascript svg对象中添加文本节点。我正在使用这个对象，但我不知道如何将文本添加到svg中。

 var circlemarker = {        
        path: 'M-5,0a5,5 0 1,0 10,0a5,5 0 1,0 -10,0 z',
        fillColor:'yellow', //'#f39c13',
        fillOpacity: 0.8,
        scale: 3,
        strokeColor: '#f7692c',
        strokeWeight: 2,
        data: 'My text' // this is not working
    };

Answer 1

首先，详细了解SVG here

TL; DR
SVG只是表示几何图形的元素集。 简单的SVG看起来像

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   <text x="30" y="40">aaa</text>
</svg> 

请注意，<text></text>是一个元素，因此无法在<circle></circle>内使用，但在

下面

所以要添加文本，请像这样创建新的文本元素

var textmarker = {
    x: 10,
    y: 40,
    fontSize: 10,
    fontFamily: 'Verdana',
    value: 'some text' //this might be tricky, as per docs, text element filled by innerHTML property, try data, text, innerHTML, etc
}