JS中使用textPath实现线条上的文字
2017-12-25 10:56
507 查看
近期在项目中要实现关系图,需要在线条上绘制文字。要实现这个功能,我们需要在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代码了。
总结
以上所述是小编给大家介绍的使用textPath实现线条上的文字,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 不使用js实现点击文字选中radio
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 使用js实现文字发光效果
- 点击文字实现radio 选中(不使用js)
- 使用js实现文字波浪效果
- 使用js实现文字颜色不停变化的链接
- 使用 JS 实现文字左右跑马灯
- 使用 JS 实现文字上下跑马灯
- 有关打印、收藏等的JS代码(打印等主要使用了一个IE组件来实现)
- 使用js实现广告切换
- JS实现间隔一段时间显示文字
- 使用纯资源DLL文件实现多语言菜单、界面文字、Tooltips等
- 使用js实现基于可视布局信息的网页噪音去除的测试方法
- 一个js实现任务栏文字滚动效果
- 使用JS实现单击连接保存图片
- 实现文字自动截断 省略号 使用CSS
- DWR使用:文字提示功能实现、简易聊天室
- 使用JS+CSS实现tab功能
- 使用JS+XML(数据岛)实现分页)