如何在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
}