svg.js 在路径中间定位文本答案

【问题标题】：svg.js position text in middle of pathsvg.js 在路径中间定位文本
【发布时间】：2019-04-29 14:55:10
【问题描述】：

我正在尝试使用 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>

image of text on path

这是我用来尝试实现上述目标的当前 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');

【问题讨论】：

标签： javascript svg svg.js

【解决方案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'})

【讨论】：