SVG.js 文本绘制整理
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 文本绘制整理相关推荐
- SVG.js 颜色渐变使用
一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- 基于svg.js实现可编辑的图像(1)
一.关于svg.js 首先是svg.js的git地址https://github.com/svgdotjs/svg.js svg.js主要用于在页面绘制svg图像,关于svg图像可以参见w3schoo ...
- svg.js使用教程
在日常web开发过程中,我们会需要显示一些图形化的元素,使用div+css.ps图片是常见的实现方式. 但使用svg来绘制可能更加合适,SVG是可缩放矢量图形,有一些预定义的形状元素,可被开发者使用和 ...
- SVG.js 笔记 (一)
SVG.js 是一款轻量级的SVG类库,并且不依赖任何第三方类库. 然后是一堆废话,讲框架是如何接近SVG规范,并且保持轻量级.接着就是展示一些SVG.js特点,为了让你相信并使用他. 代码精简 通过 ...
- Svg.Js A标签,链接操作
一.创建a标签,为a标签添加内容 <div id="svg1"></div> <script>//SVG.A 链接创建var draw = SV ...
- JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用) 作者: 字体:[增加 减小] 类型:转载 时间:2013-11-14 我要评论 JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助 ...
- HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
- Auto.js 全命令整理(三) 输出专题
Auto.js 全命令整理(三) 输出专题 目录 Auto.js 全命令整理(三) 输出专题 Console Toast Dialogs 末 各种输出方法,让你了解程序现在在干什么- Console ...
最新文章
- 分类问题中的“维数灾难” - robotMax
- socket通信——通过Udp传输方式,将一段文字数据发送出去
- LINUX samba的安装使用
- python3--装饰器
- 计算机配置中无可移动设备访问,USB连接正常,但是我的电脑中不显示可移动 – 手机爱问...
- Python3--自动化办公
- Android中常用到的权限
- etcd php,etcd集群备份和数据恢复
- python调用sqlplus执行_python可以调用sqlplus吗?
- 今天没白过之《ls命令的颜色》
- include virtual引入html文件,ASP文件引用include file和include virtual两种用法
- 网络爬虫-学习记录(三)使用Selenium并对去哪儿网站进行爬取
- 【项目】Online Judge(在线评判系统)
- 动漫美少女生成神器、猫的门禁...2019年十七大最佳机器学习项目 |年度盘点①...
- echarts散点图x轴和y轴在中间位置
- 关于恢复误删Word文档的步骤详解
- SpringBoot项目发布与部署,及使用花生壳映射项目
- 计算机页面大小4k,4K分辨率到底是什么?简单告诉你
- 开发TI DSP需要知道的
- 储能系统集成解决方案
热门文章
- 用ffmpeg把H264数据流解码成YUV420P
- 开源 免费 java CMS - FreeCMS-功能说明-用户管理
- P2P网络“自由”穿越NAT的“秘密”
- matlab中.P文件的介绍
- 强行分类提取特征自编码网络例1
- 一句话搞定deepin中安装cuda的问题
- pyhton列表习题
- Android O 8.0 以上 bitmap内存分配
- vue 优化CDN加速
- 【问题解决】连接mysql 8错误:authentication plugin 'caching_sha2_password