在日常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)