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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
JavaScript常用工具函数库汇总
Sep 17 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
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
xtree.js 代码
2007/03/13 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
vuex存取值和映射函数使用说明
2020/07/24 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python3实现随机数
2018/06/25 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
英智兴达软件测试笔试题
2016/10/12 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
产品推广策划方案
2014/05/10 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2015元旦标语横幅
2014/12/09 职场文书
小鞋子观后感
2015/06/05 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS