JS中使用textPath实现线条上的文字


Posted in Javascript onDecember 25, 2017

近期在项目中要实现关系图,需要在线条上绘制文字。要实现这个功能,我们需要在SVG中连接的线条从标签line修改为path,这样才可能实现类似如下的效果:

JS中使用textPath实现线条上的文字 

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实现线条上的文字,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
jQuery实现评论模块
Aug 19 jQuery
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 #Javascript
JS实现标签滚动切换效果
Dec 25 #Javascript
JS实现图片居中悬浮效果
Dec 25 #Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 #Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 #Javascript
微信小程序录音与播放录音功能
Dec 25 #Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 #Javascript
You might like
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python实现的堆排序算法示例
2018/04/29 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python实现人工蜂群算法
2020/09/18 Python
影视动画专业个人的自我评价
2013/12/31 职场文书
企业年会主持词
2014/03/27 职场文书
本科毕业生求职信
2014/06/15 职场文书
活动总结报告怎么写
2014/07/03 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
药品开票员岗位职责
2015/04/15 职场文书
python如何做代码性能分析
2021/04/26 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Go并发4种方法简明讲解
2022/04/06 Golang