svg.js将文本放在路径中间

Question

我正在尝试使用svg.js将文本定位在路径中间。下面我可以通过svg实现它。。。

<svg width="140" height="140">
<defs>
<path id="textPlot" d="M68,27 L 51 31 39 39 29 52 26 69 31 86 41 99 55 108 70 111 86 108 99 98 107 85 111 68 106 49 99 39 87 30" fill="#ddd" stroke="#ddd"></path>
</defs>
<text style="font-size: 20px;">
<textPath xlink:href="#textPlot" startOffset="50%" text-anchor="middle">text align in middle</textPath>
</text>
</svg>

路径上的文本图像

以下是Im尝试实现上述目标所使用的当前javascript代码。但我不知道svg.js API上有任何其他属性可以指定文本应该位于路径的中间基线上。

SVG('svgNodeId').text('center my text in path')
.attr({id:'myText'})
.font({size:15})
.path('M65,25 L 42 35 28 53 27 77 37 93 52 103 69 108 90 100 104 84z');

Answer 1

您可以通过调用text.textPath()来获取<textPath>子级。当您拥有该元素时，您可以设置所需的所有属性。

SVG('svgNodeId').text('center my text in path')
.attr({id:'myText'})
.font({size:15})
.path('M65,25 L 42 35 28 53 27 77 37 93 52 103 69 108 90 100 104 84z')
.textPath()
.attr({startOffset: '50%', 'text-anchor': 'middle'})