1.SVG.Text

var draw = SVG('svg1').size(300, 300);
//画文字内容展示
//var text = draw.text('中文内容测试\n换行处理');
var text2 = draw.text(function (add) {//添加span元素包裹的文字add.tspan('中文内容').newLine(); //指定当前内容开启新的一行,第一行一般都需要add.tspan('换行1').fill('#f06').newLine();add.tspan('.');add.tspan('换行2').newLine().dx(20);add.tspan('换行3').newLine();
});
//获取当前text的长度
var length = text2.length(); //191.140625
console.info(length);
//获取或这是文本内容
var txt = text2.text();
console.info(txt);
text2.text('修改后的内容'); //会覆盖已有的内容
//为text添加span元素 ,返回SVG.tspan
var span = text2.tspan('on a train...'); //会覆盖已有的内容
span.fill('red').newLine();
//清空text的内容
text2.clear();

 

var draw = SVG('svg1').size('100%', 300);
//画文字的格式
var text = draw.text('中文测试内容');
//获取或设置font
text.font({family: 'Helvetica',size: 24,anchor: 'middle', //设置位置的相对定位点leading: '1.5em'
});
text.move(100,100);
var font=text.font();
console.info(font);//获取或设置leading,似乎没起作用
text.leading(1,3);
text.lines();
text.plain('中文测试');//设置纯文本内容//重新建立文本输入,追加内容 ,使用build()
text.build(true);
var tspan = text.tspan('something pink in the middle ').fill('#00ff97');
text.plain('and again boring at the end.');
text.build(false) // disables build mode
tspan.animate('2s').fill('#f06').loop(true, true);
//清空重置内容、动画等
text.rebuild(true);//更多扩展
// leading (will do the same as calling the leading() method as setter)
// anchor (will set the text-anchor attribute)
// family (will set the font-family attribute)
// size (will set the font-size attribute)
// stretch (will set the font-stretch attribute)
// style (will set the font-style attribute)
// variant (will set the font-variant attribute)
// weight (will set the font-weight attribute)

2.SVG.Tspan

var draw = SVG('svg1').size('100%', 300);
//SVG.Tspan 添加span元素
var text = draw.text('测试');
var span = text.tspan('http://www.gongjuji.net');
//开启新的一行
span.newLine();
//设置文本位置 dx dy
span.dx(100).dy(100);
//获取span 的长度(注:不是字数)
var length = span.length(); //160.09375
console.info(length);
//追加纯文本
span.plain('中文测试文本');//获取或追加内容
//span.text('Just a string.');
span.text(function (add) {add.plain(' 新行1');add.tspan('》其他内容').fill('red');
});
//追加子的span元素
span.tspan('abc').fill('blue');
//清空文本
//span.clear();

3. SVG.TextPath 

var draw = SVG('svg1').size('100%', 700);
//设置文本路径
var text = draw.text(function (add) {add.tspan('We go');add.tspan('up').fill('#f09').dy(-40);
});
//设置路径
var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100';
text.path(path).font({size: 42.5,family: 'Verdana'
});
//修改文本路径
text.plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100');
//获取textPath() 对象
var textPath = text.textPath();
textPath.attr('startOffset', '50%');
//路径使用动画
textPath.animate(3000).attr('startOffset', '80%').loop(true, true);
// //获取数组点,SVG.PathArray ----测试不可用
// var array1=text.textPath().array();
// console.info(array1);
var path2 = text.track();
//console.info(path2);//绑定事件 rebuild
text.on('rebuild', function () {//获取当前text的内容var content = text.text();console.info(content);
});
//text.rebuild(true);
text.build(true);
text.tspan('中文内容').fill('blue');

更多:

SVG.js 基础图形绘制整理(二)

SVG.js 基础图形绘制整理(一)

Svg.Js 父类的基础操作

转载于:https://www.cnblogs.com/tianma3798/p/6611420.html

SVG.js 文本绘制整理相关推荐

  1. SVG.js 颜色渐变使用

    一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...

  2. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  3. 基于svg.js实现可编辑的图像(1)

    一.关于svg.js 首先是svg.js的git地址https://github.com/svgdotjs/svg.js svg.js主要用于在页面绘制svg图像,关于svg图像可以参见w3schoo ...

  4. svg.js使用教程

    在日常web开发过程中,我们会需要显示一些图形化的元素,使用div+css.ps图片是常见的实现方式. 但使用svg来绘制可能更加合适,SVG是可缩放矢量图形,有一些预定义的形状元素,可被开发者使用和 ...

  5. SVG.js 笔记 (一)

    SVG.js 是一款轻量级的SVG类库,并且不依赖任何第三方类库. 然后是一堆废话,讲框架是如何接近SVG规范,并且保持轻量级.接着就是展示一些SVG.js特点,为了让你相信并使用他. 代码精简 通过 ...

  6. Svg.Js A标签,链接操作

    一.创建a标签,为a标签添加内容 <div id="svg1"></div> <script>//SVG.A 链接创建var draw = SV ...

  7. JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用) 作者: 字体:[增加 减小] 类型:转载 时间:2013-11-14 我要评论 JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助 ...

  8. HTML5: 利用SVG动画动态绘制文字轮廓边框线条

    DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...

  9. Auto.js 全命令整理(三) 输出专题

    Auto.js 全命令整理(三) 输出专题 目录 Auto.js 全命令整理(三) 输出专题 Console Toast Dialogs 末 各种输出方法,让你了解程序现在在干什么- Console ...

最新文章

  1. 分类问题中的“维数灾难” - robotMax
  2. socket通信——通过Udp传输方式,将一段文字数据发送出去
  3. LINUX samba的安装使用
  4. python3--装饰器
  5. 计算机配置中无可移动设备访问,USB连接正常,但是我的电脑中不显示可移动 – 手机爱问...
  6. Python3--自动化办公
  7. Android中常用到的权限
  8. etcd php,etcd集群备份和数据恢复
  9. python调用sqlplus执行_python可以调用sqlplus吗?
  10. 今天没白过之《ls命令的颜色》
  11. include virtual引入html文件,ASP文件引用include file和include virtual两种用法
  12. 网络爬虫-学习记录(三)使用Selenium并对去哪儿网站进行爬取
  13. 【项目】Online Judge(在线评判系统)
  14. 动漫美少女生成神器、猫的门禁...2019年十七大最佳机器学习项目 |年度盘点①...
  15. echarts散点图x轴和y轴在中间位置
  16. 关于恢复误删Word文档的步骤详解
  17. SpringBoot项目发布与部署,及使用花生壳映射项目
  18. 计算机页面大小4k,4K分辨率到底是什么?简单告诉你
  19. 开发TI DSP需要知道的
  20. 储能系统集成解决方案

热门文章

  1. 用ffmpeg把H264数据流解码成YUV420P
  2. 开源 免费 java CMS - FreeCMS-功能说明-用户管理
  3. P2P网络“自由”穿越NAT的“秘密”
  4. matlab中.P文件的介绍
  5. 强行分类提取特征自编码网络例1
  6. 一句话搞定deepin中安装cuda的问题
  7. pyhton列表习题
  8. Android O 8.0 以上 bitmap内存分配
  9. vue 优化CDN加速
  10. 【问题解决】连接mysql 8错误:authentication plugin 'caching_sha2_password