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 元素操作整理(二)-Transform
一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...
- SVG.js 元素操作整理(一)
一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect( ...
- SVG.js 引用获取整理
一.SVG.get() 根据id获取元素 var draw = SVG('svg1').size(300, 300); var circle = draw.circle(50); circle.fil ...
- SVG.js 图案使用和use引用
一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.patt ...
- SVG.js 颜色渐变使用
一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...
- Svg.js 图片加载
一.SVG.Image 1.创建和修改图片 var draw = SVG('svg1').size(300, 300); //SVG.Image 加载图片文件 var image = draw.ima ...
- SVG.JS 画弧线
需求描述: 使用svg.js,绘制一个弧线.下图绿色弧线. 准备工作: 1.了解SVG Path中的A指令 详细文档,请戳这里 给定x半径.y半径后,经过指定的两点,可以有2个椭圆,因此两点间有2条弧 ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- SVG.js 基础图形绘制整理(一)
一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100 ...
随机推荐
- zookeeper集群自动启动脚本
定义脚本boot.sh启动zookeeper集群(hadoop1,hadoop2,hadoop3) #!/bin/bash echo "start zkServer..." do ...
- oracle数据库连接错误解决办法
ORA-28547 连接服务器失败,可能是Oracle Net 管理错误 原文地址:http://www.linuxidc.com/Linux/2014-11/109686.htm 上周去给客户培训O ...
- Git 版本控制管理(一)
Git 是一个分布式版本控制工具,它的作者 Linus Torvalds 是这样给我们介绍 Git —— The stupid content tracker(傻瓜式的内容跟踪器) 关于 Git 的 ...
- Nuxt.js 学习笔记
起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成 ...
- centos7 静默安装oracle
系统centos7.4 mini 关闭selinux.firewalld 配置主机名: hostnamectl set-hostname --static oracle 之前说oracle不认cen ...
- C/C++ 和 PHP 技术经典图书,学习视频资料总结
技术经典图书 1.<计算机科学导论> 作者:(美)佛罗赞,(美)莫沙拉夫著,刘艺等译(强推) 涵盖了大部分计算机课程的内容,但都是简介,是最基础的知识,非常适合计算机初学者看,强烈建议把课 ...
- Django-Filter源码解析一
Django Filter源码解析 最近在看Django-FIlter项目的源码,学习一下别人的开发思想: 整体介绍 首先,我从其中一个测试用例作为入口,开始了debug之路,一点一点的断点,分析它的 ...
- UVALive 6910 Cutting Tree 并查集
Cutting Tree 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8& ...
- 移动端web,tap与click事件
一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...
- Jenkins官方教程地址入口
https://jenkins.io/doc/book/ 其实Jenkins的核心在于插件,官方教程只能是基本简单的,所以要找教程最好对应插件来找.