本文主要和大家分享js中使用textpath实现线条上文字的方法教程，近期在项目中要实现关系图,需要在线条上绘制文字。要实现这个功能,我们需要在svg中连接的线条从标签line修改为path,这样才可能实现类似如下的效果:
1个简单的例子如下所示:
<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 0 400 100 c 500 200 600 300 700 200 c 800 100 900 100 900 100" fill="none" stroke="red"/> <text font-family="verdana" font-size="42.5"> <textpath xlink:href="#mypath" rel="external nofollow" > we go up, then we go down, then up again </textpath> </text> </svg>
在这里我们需要实现1个path,然后设置其id属性,之后我们创建textpath标签,并链接到上述的id属性,这样就可以实现在路径上关联文字了。
而在d3中我们可以这样操作:
var link = svg.append("g").selectall(".edgepath") .data(graph.links) .enter() .append("path") .style("stroke-width",0.5) .style("fill","none") .attr("marker-end",function(d){ return "url(#"+d.source+")"; }) .style("stroke","black") .attr("id", function(d,i){ return "edgepath"+i; }); var edges_text = svg.append("g").selectall(".edgelabel") .data(graph.nodes) .enter() .append("text") .attr("class","edgelabel") .attr("id", function(d,i){ return "edgepath"+i; }) .attr("dx",80) .attr("dy",0); edges_text.append("textpath") .attr("xlink:href", function(d,i){ return "#edgepath"+i; }).text(function(d){ return d.id; })
实际上这段代码就是上述例子的实现,这样就可以避免编写繁琐的svg代码了。
相关推荐：
svg基础|svg textpath 元素
svg（可缩放矢量图形）虚线相关属性与线条动画原理：一条会动的线
jquery实现带滚动线条导航效果的方法_jquery
以上就是js中使用textpath实现线条上文字的方法教程的详细内容。