用文本路径实现JS中的文本在线

在不久的将来，要在项目中实现图表，就必须在线上绘制文本。要实现这个功能，我们需要将SVG中连接的线从标签线改为路径，从而实现类似下面：的效果

:下面显示了一个简单的示例

SVG viewBox=' 0 0 1000 300 ' xmlns=' http://www . w3 . org/2000/SVG ' xmlns : xlink=' http://www . w3 . org/1999/xlink ' path ID=' MyPath ' d=' M 100 200 C 200 100 300 400 C 500 200 600 300 700 200 C 800 C

在D3中，我们可以这样操作：

var link=svg.append('g ')。选择全部('。edge path’)。数据(图表.链接)。输入()。追加('路径')。样式('笔画宽度'，0.5)。样式(“填充”、“无”)。attr('marker-end '，函数(d){ return ' URL(' d . source ')'；}) .样式(“笔画”、“黑色”)。attr('id '，函数(d，I){ return ' edge path ' I；});var edges_text=svg.append('g ')。选择全部('。edge label’)。数据(graph.nodes)。输入()。追加('文本')。attr('class '，' edgelabel ')。attr('id '，函数(d，I){ return ' edge path ' I；}) .attr('dx '，80)。attr('dy '，0)；edges_text.append('textPath ')。attr('xlink:href '，函数(d，I){ return ' # edge path ' I；}).text(函数(d){ return d . id；})其实这段代码就是上面例子的实现，所以可以避免编写繁琐的SVG代码。

摘要

以上是使用textPath实现行上字符的介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！