svg.js使用教程
在日常web开发过程中,我们会需要显示一些图形化的元素,使用div+css、ps图片是常见的实现方式。
但使用svg来绘制可能更加合适,SVG是可缩放矢量图形,有一些预定义的形状元素,可被开发者使用和操作: 矩形(rect)、 圆形(circle)、 椭圆(ellipse)、 线(line)、 折线(polyline)、 多边形(polygon)、 路径(path)。
svg可以是独立的*.svg
文件,可以通过 embed标签、object标签、iframe标签 来引入。也可以直接将svg代码写入html中,开发和使用起来非常灵活。
本教程主要介绍svg.js
,这是用于操作和动画 SVG 的轻量级库。官网自荐的理由有:
- SVG.js 没有依赖性,旨在尽可能小,同时提供几乎完整的 SVG 规范覆盖。
- 代码易于阅读,语法整洁。
- 完美支持动画
- 大小、位置、变换、颜色等动画
- 得益于模块化结构,无痛扩展
- 各种有用的插件可用
- 具有move、size、center、 …的形状类型之间的统一 api
- 将事件绑定到元素
- 完全支持不透明蒙版和剪切路径
- 文本路径,甚至动画
- 元素群
- 动态渐变和图案
安装:
npm install @svgdotjs/svg.js
一、绘制
1.1 创建svg容器
import { SVG } from '@svgdotjs/svg.js'
var draw = SVG(); //返回Svg容器
1.2 指定容器存放位置
可以是css选择器
,也可以是dom节点;
draw.addTo(main.value).size("100%", "100%");
// draw.addTo(".main").size("100%", "100%"); 效果一样
// draw.addTo("#main").size("100%", "100%"); 效果一样
1.3 矩形
draw.rect(100, 100).attr({ fill: '#f06' }) //返回rect
1.4 嵌套矩形
let nested = draw.nested(); //返回svg
nested.rect(100, 100).move(100, 100); //返回rect
到这里,页面显示如下:
1.5 分组
let group = draw.group();
group.path('M10,20L30,40')
group.add(rect1); //分组中插入矩形
group.add(rect2, 0); //分组中插入矩形,并指定位置索引在0,就是第一个;
1.6 标记
标记元素与组元素不同,符号元素是容器元素。 符号和组之间的唯一区别是没有html标签。
下面代码和上面group元素类似,显示也一样,但是看html代码可以看到,没有sumbol标签。
var symbol = draw.symbol()
symbol.path('M10,20L30,40')
symbol.add(rect1);
symbol.add(rect2, 0);
var use = draw.use(symbol)
1.7 defs
元素是引用元素的容器。 节点的后代未直接渲染。 节点属于主def()
方法访问。
var defs = draw.defs();
1.8 链接
var link = draw.link('http://svgdotjs.github.io/')
link.target('_blank')
var textLink = link.text("百度").size(100, 20).fill("#0f0").move(200, 0);
var rectLink = link.rect(100, 20).fill("#0f0").move(200, 20);//link.to('http://svgdotjs.github.io/').target('_blank') 修改链接地址和target
//rect1.linkTo('http://svgdotjs.github.io/') 给图形加上链接
1.9 SVG.Dom
使用element()
、element.words()
可以用来创建dom节点。
var element = draw.element('title').words('This is a title.');
element变量数据如下:
html代码如下:
1.10 SVG.Rect 矩形
代码如下:
var rect = draw.rect(100, 100).radius(10, 20)
效果如下:
1.11 SVG.Circle 圆
circle():
var circle = draw.circle(100)
最终html代码中,100是直径,可以看到半径是50,横向和纵向坐标是50;
circle.radius():
radius中设置的半径比circle中的优先级更高;
var circle = draw.circle(100).radius(100);
相比没有radius的代码,radius(100)
修改了半径r;
1.12 SVG.Line 线条
var line = draw.line(0, 50, 50, 100).stroke({ width: 10, color: '#f06', linecap: 'round' }).move(0, 0);
获取坐标信息:
line.array()
返回数据如下:
修改线条:
line.plot('0,0 100,150')
// line.plot([[0, 0], [100, 150]]) 效果一致
// line.plot(new SVG.PointArray([[0, 0], [100, 150]])) 效果一致
1.13 文本
1.13.1 text()
支持换行
var text1 = draw.text('Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.');
text.move(20, 20).font({ fill: '#f06', family: 'Inconsolata' })
1.13.2 tspan()
手动创建换行
var text2 = draw.text(function (add) {add.tspan('Lorem ipsum dolor sit amet ').newLine()add.tspan('consectetur').fill('#f06')add.tspan('.')add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)add.tspan('Nunc ultrices lectus at erat').newLine()add.tspan('dictum pharetra elementum ante').newLine()
})
1.13.3 plain()
纯文本,过滤换行符
var text3 = draw.plain('Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.')
1.13.4 build() 构建模式
A 开启构建模式
在这种模式下,text中内容会被
var text = draw.text('This is just the start, ').move(0, 0).font({ fill: '#f06', family: 'Inconsolata' })
text.build(true) // enables build mode
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
B 未开启构建模式
在这种模式下,text中的内容永远会被替换处理;
var text = draw.text('This is just the start, ').move(0, 0).font({ fill: '#f06', family: 'Inconsolata' })
var tspan = text.tspan('something pink in the middle ').fill('#00ff97')
text.plain('and again boring at the end.')
1.13.5 常用方法
text.clear() //清除被调用文本元素的所有内容:
text.length() //获取所有 tspan 的总计算文本长度:
text.font({family: 'Helvetica'
, size: 144
, anchor: 'middle'
, leading: '1.5em'
}) //设置方法
text.leading(1.3) //设置leading
text.length(); //获取方法的整体长度
text.font("leading"); //获取字体线管属性值
1.13.6 path() 设置文本路径
var text = draw.text(function (add) {add.tspan('We go ')add.tspan('up').fill('#f09').dy(0)add.tspan(', then we go down, then up again').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'var textpath = text.path(path).font({ size: 22.5, family: 'Verdana' })
1.13.7 textPath() 返回文本路径
text.textPath()
1.13.8 修改/获取文本
text.text('Brilliant!')
//text.text() 获取文本
1.14 图片
var image = draw.image('https://cdn.img42.com/4b6f5e63ac50c95fe147052d8a4db676.jpeg')
image.size(100, 100).move(20, 20)
1.14.1 修改图片路径
image.load('/path/to/another/image.jpg', callback)
svg.js使用教程相关推荐
- 【D3.V3.js系列教程】--(十四)有路径的文字
[D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...
- SVG.js 笔记 (一)
SVG.js 是一款轻量级的SVG类库,并且不依赖任何第三方类库. 然后是一堆废话,讲框架是如何接近SVG规范,并且保持轻量级.接着就是展示一些SVG.js特点,为了让你相信并使用他. 代码精简 通过 ...
- Svg.Js A标签,链接操作
一.创建a标签,为a标签添加内容 <div id="svg1"></div> <script>//SVG.A 链接创建var draw = SV ...
- SVG.js 文本绘制整理
1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...
- 基于svg.js实现可编辑的图像
svg.js的git地址https://github.com/svgdotjs/svg.js 实现可以拖动,可双击编辑,可拖动改变长短,线条可旋转以及一个可点击改变大小,可更改内容的二维码. 首先引入 ...
- 24个很赞的 Node.js 免费教程和在线指南
JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- js模版引擎handlebars.js实用教程——结束语
返回目录 有了这些功能,[ajax json Handlebars]替代[vo el表达式]不成问题,新时代的曙光已经来临,最佳解决方案在此,您还等什么? 教程到此结束...祝读者学习愉快... 转载 ...
最新文章
- 算法----------快乐数 (Java版本)
- nginx openresty content_by_lua_file 404错误
- python 爬虫实例-python爬虫实例,一小时上手爬取淘宝评论(附代码)
- 英文文献中的一些单词
- css 背景图怎么设置自动填充满_CSS-布局与定位
- Date函数基础知识整理
- oracle 10 expdp impdp 导入、导出
- 32位操作系统,为什么最大支持4G存储空间,2的32次方 = 4294967296bit = 4G,这个怎么计算出来的,
- CompletionService VS ExecutorService
- vue+elementui+quill富文本框+秀米编辑器和135编辑器
- 中天易税服务器网站,中天易税网上报税系统
- ip归属地是什么?ipv4和ipv6区别?
- Java8 Stream经典示例
- php deflate 解压,PHP编码gzdeflate与Golang解码DEFLATE
- Springboot项目启动异常 org.springframework.beans.factory.UnsatisfiedDependencyException
- Armv8-R系列之何为MPU?
- jdk15和jdk8_jdk15下载
- 华为S系列交换机如何取消端口类型的设置
- 强化学习1-思想及分类
- HBase的一点纪要
热门文章
- AndroidManifest.xml简单总结
- android 微信登录与分享集成
- 最快的速度学习C语言的基础部分
- Web前端基础回顾(HTML、CSS)
- MFC中CString.Format的详细用法和进制转换
- 【面经二】拼多多、字节跳动、触宝、平安证券等公司算法工程师面试问题集锦
- Chrome神器Vimium快捷键
- Echarts雷达图1.0
- DD-WRT端口绑定两个端口合并带宽
- anaconda3/lib/python3.6/site-packages/torch/lib/libtorch_python.so: undefined symbol: PySlice_Unpack