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代码了。

总结

以上所述是小编给大家介绍的使用textPath实现线条上的文字，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript中${pageContext.request.contextPath}取值问题及解决方案

    在JSP里取${pageContext.request.contextPath},方式一是可以正常取到,但方式二却取到的是 字符"${pageContext.request.contextPath}" 方式一: <script type="text/JavaScript"> var t = "${pageContext.request.contextPath}"; <script> 方式二: <script src=

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

    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="MyPa

  • JS中FormData类实现文件上传

    本文实例为大家分享了JS中FormData类实现文件上传的具体代码,供大家参考,具体内容如下 上篇文章讲到了FormReader类实现文件上传,但是那是HTML5的新特性,在不支持H5的浏览器上则无法使用.这次介绍一个JS的普通类FormData,在不支持H5浏览器环境下也可以文件上传和预览,并且还能监控上传进度. 案例一:xhr.upload.onprogress监控文件的上传进度,并且动态显示 <!DOCTYPE html> <html lang="en">

  • JS中FileReader类实现文件上传及时预览功能

    FileReader是H5浏览器才支持的JS类,如果不支持H5de浏览器可以使用FormData类实现文件的上传预览,使用可以参考我的下一篇博客:JS中FormData类实现文件上传 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

  • js中的值类型和引用类型小结 文字说明与实例

    一.拥抱JavaScript 曾经名不经传的JavaScript随着AJAX的流行而身价倍增,现在JavaScript不再仅仅是WEB开发中一个可有可无的辅助工具,甚至有了专门属于它的职位"JavaScript工程师",那怕你仅仅是一名WEB后台开发程序员,你都必须了解JavaScript,至少在一些相关招聘职位要求上你可以看到"熟悉JavaScript优先"的字眼.甚至我还要告诉你,你将可以用JavaScript开发桌面软件,这得益于Adobe AIR的另外一种开

  • js中的referrer返回上一页使用介绍

    js完整代码: 复制代码 代码如下: <script language="javascript"> var refer=document.referrer; document.getElementById('backurl').value=refer; </script> "HTTP_REFERER" 链接到当前页面的前一页面的 URL 地址.不是所有的用户代理(浏览器)都会设置这个变量,而且有的还可以手工修改 HTTP_REFERER.因此

  • node.js中实现kindEditor图片上传功能的方法教程

    node.js中实现kindEditor图片上传功能的方法教程

    前言 最近由于工作需要使用在线编辑器,找了几个对比了下KindEditor还是不错的,国产的但文档还是不全,还好能参考官方插件,kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用 可以参照官方文档实现nodejs的kindEditor上传功能:http://kindeditor.net/docs/upload.html 在线下载kindEditor编辑器:http://www.jb51.net/codes/36131.html 实现方法: 1.在客户端js中定义upl

  • 在Node.js中使用HTTP上传文件的方法

    在Node.js中使用HTTP上传文件的方法

    开发环境 我们将使用 Visual Studio Express 2013 for Web 作为开发环境, 不过它还不能被用来做 Node.js 开发.为此我们需要安装 Node.js Tools for Visual Studio.  装好后 Visual Studio Express 2013 for Web 就会转变成一个 Node.js IDE 环境,提供创建这个应用所需要的所有东西..而基于这里提供的指导,我们需要: 下载安装 Node.js  Windows 版,选择适用你系统平台的

  • JS中使用FormData上传文件、图片的方法

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

  • Node.js HTTP服务器中的文件、图片上传的方法

    HTTP协议中,multipart/form-data格式用于向服务器发送二进制数据,通过这一内容类型(Content-Type)可以实现文件.图片的上传.由于这种格式发送的是二进制数据,在服务器端接收和处理数据时会与其它内容类型有所有区别. HTTP协议中的文件上传 最早的HTTP协议中是不支持文件上传的,在1995年制定的rfc1867规范中,在HTTP POST请求的内容类型Content-Type中扩展了multipart/form-data类型,该类型用于向服务器发送二进制数据,以便支

  • 在Koa.js中实现文件上传的接口功能

    文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

随机推荐