svg.js 使用笔记

创建一个SVG文档

var draw = SVG('canvas').size(300, 300); // 使用像素
// 或 var draw = SVG('canvas').size('100%', '100%'); // 使用百分比
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

以上两句将在html文档中产生以下代码

<div id="canvas">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
        <rect width="100" height="100" fill="#f06"></rect>
    </svg>
</div>

检测浏览器对SVG的支持度

if (SVG.supported) {
  var draw = SVG('canvas')
  var rect = draw.rect(100,100)
} else {
  alert('SVG not supported')
}

ViewBox

svg的属性可以用viewbox()方法来确定，viewbox()方法就像是一个setter函数一样

draw.viewbox(0,0,300,200)

等同于

draw.viewbox({ x: 0, y: 0, width: 300, height: 200 })

前两个参数表示的位置，后两个是其宽度和高度

如果没有任何参数，那么viewbox就直接返回一个空的svg，viewbox() 方法可以有zoom属性

var box = draw.viewbox()
var zoom = box.zoom

如果viewbox中的的大小和实际的SVG画布的大小相同，那么zoom的值就是1

SVG 文档

svg.js 也可以在 DOM 外工作，如下所示，是一个独立的svg文件，就像是外部的js文件一样

<?xml version="1.0" encoding="utf-8"?>
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <script type="text/javascript" xlink:href="https://cdn.bootcdn.net/ajax/libs/svg.js/3.0.9/svg.min.js"></script>
    <script type="text/javascript">
        <![CDATA[
            let draw = SVG('#demo'); // 2.x 版本不需要带#号，3.x 版本需要#号
            draw.rect(100,100).fill('#ff0000');
        ]]>
    </script>
</svg>

VUE 中使用 svg.js

npm install @svgdotjs/svg.js 

import { SVG } from "@svgdotjs/svg.js"  
Vue.prototype.$SVG = SVG

this.draw = this.$SVG().addTo(this.$refs['element']).size("100%", "100%");
this.draw.rect(100,100).fill('#ff0000');  
// 或 this.rect  = this.draw.rect(100,100).fill('#ff0000');

子像素的偏移修正

默认情况下子像素的偏移是不正确的，你可以通过fixSubPixelOffset()方法来修正它

var draw = SVG('drawing').fixSubPixelOffset()

主SVG文档

var draw = SVG('drawing')

嵌套SVG

通过该特性来在一个SVG中嵌套另一个SVG，嵌套SVG和顶级SVG拥有相同的特性

var nested = draw.nested() 
var rect = nested.rect(200, 200)

SVG组

如果你想转换一组元素为一个SVG，可以使用SVG组特性。组中的所有元素的位置都相对于包含它的组。组中的元素拥有和根SVG相同的方法

var group = draw.group() 
group.path('M 10,20 L 30,40')

// 可以将现有的SVG元素添加到组中 
group.add(rect) 

超链接

// 通过一个超链接或<a>元素来创建容器可以使它的所有子元素获取该链接
var link = draw.link('http://svgjs.com')
var rect = link.rect(100, 100)

// 超链接的url可以通过to()方法来更新
link.to('http://www.htmleaf.com')

// 超链接元素有一个show()方法可也创建xlink:show属性
link.show('replace')

// target()方法可以创建target属性
link.target('_blank')

// 元素也可以通过linkTo()被链接到其它地方
link.linkTo('http://www.htmleaf.com')

// 使用函数的方式可以同时添加多个属性
rect.linkTo(function(link) {
    link.to('http://svgjs.com').target('_blank')
})

Defs

// <defs>元素是一个引用其它元素的容器元素。一个"defs"的后代元素不会直接被渲染。<defs>节点在<svg>文档中有效
var defs = draw.defs()

// defs在任何使用doc()方法的元素上有效
var defs = rect.doc().defs()

SVG元素

矩形 rect，两个参数，宽度和高度

var rect = draw.rect(100, 100)

圆角 radius

rect.radius(10) 
rect.radius(10, 20)

椭圆 ellipse，两个参数，横向和纵向的直径

var ellipse = draw.ellipse(200, 100)

圆 circle，一个参数，直径

var circle = draw.circle(100)
// 倘若画椭圆的时候，设置其两个参数相同，那么实际上画出的图形和相同直径的圆是一样的

直线 line，四个参数，直线起点和终点的x、y坐标

var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })

折线 polyline

// 由三个或三个以上的点组成折线，也可以认为是不闭合的多边形。所以其参数就是折线顶点的坐标
var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
// 其中用空格分开的每一对坐标x1,y1表示一个顶点的坐标，所以使用以下的这种集合的方式来表示点的坐标也是可以的
var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 })

// 可以通过plot()方法来更新折线的坐标点
polyline.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])

// plot()方法也可用于动画
polyline.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])

多边形 polygon

// polyline画出的是折线，是不闭合的多边形，polygon则相对的画出的是闭合的多边形。其参数是闭合多边形的顶点的坐标
var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
// 二者的区别仅仅在于，起点和终点是否连接。

// 可以通过plot()方法来更新多边形的坐标点
polygon.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])

// plot()方法也可用于动画
polygon.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])

路径 path

var path = draw.path('M 10,20 L 30,40')

// 可以通过plot()方法来更新路径的坐标点
path.plot('M100,200L300,400')

// 实际上svg.js中Path的使用方法跟 svg 的Path的使用方法是一样的。具体如下
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

图片 image

var image = draw.image('/path/to/image.jpg', 200, 200).move(100, 100)

第一个参数是图片路径，后两个参数分别表示图片的宽度和高度

可以通过load()方法来加载另一张图片

draw.image('/path/to/another/image.jpg')

如果不知道图片的大小，需要等待图片加载完毕

var image = draw.image('/path/to/image.jpg').loaded(function(loader) {
    this.size(loader.width, loader.height)
})

loaded方法返回的loader有四个参数
width
height
ratio (width / height)
url

文本 text

第一种是最简单的创建文本的方式

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")

第二种方式相对复杂，也增加了更多控制

var text = 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()
})

如果只有一行文本，可以使用plain()方法

var text = draw.plain('Lorem ipsum dolor sit amet consectetur.')

其他

// 获取text文本的内容
text.content

// 修改text文本的内容：
text.text('Brilliant!')

// 还有如下这种使用起来更自然的方式
text.font({
	family:   'Helvetica', 
	size:     144,
	anchor:   'middle', 
	leading:  '1.5em'
})

// 清除文本
text.clear()

// 获取所有文本的长度
text.length()

// 所有添加的tspans都被存储在lines引用中，它是SVG.Set的一个实例。文本元素只有一个事件。它在每次rebuild()方法被调用时触发。
text.on('rebuild', function() {
  // code
})

build() 用来使用和禁用build模式

当build模式模式被禁用，plain()和tspan()方法在添加新的内容之前首先调用clear()方法。当打开build模式时，plain()和tspan()方法将会追加新的内容。当通过text()方法制作一个文本块的时候，build模式会在文本块被调用之前和之后自动切换。

var text = draw.text('This is just the start, ')
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
tspan.animate('2s').fill('#f06')

rebuild() 这是一个内部的回调方法，你可能不会使用到。它在文本的font-size、x或leading()被修改时重建文本元素。该方法可以通过一个setter来使用和禁用rebuild()方法

text.rebuild(false) //-> disables rebuilding
text.rebuild(true)  //-> enables rebuilding and instantaneously rebuilds the text element

文本路径 textPath

var text = draw.text(function(add) {
  add.tspan('We go ')
  add.tspan('up').fill('#f09').dy(-40)
  add.tspan(', then we go down, then up again').dy(40)
})
text.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').font({ size: 42.5, family: 'Verdana' })

以上代码在执行时，将沿着给定的路径绘制文本。

继承 use

var rect = draw.rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

如上代码所示，在SVG画布上将会出现两个rect，原始的rect和use的实例，任何在原始rect上所做的修改都将会在use的实例上显现。

如果不想让原始的rect出现，可以使用defs()方法，由此也拓展出一个更易于重用的SVG组件。可以将原始的rect当作一个库元素，可以通过use方法来进行重用而不会修改原始元素。

var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

目前学习到这里，后面需要用的直接查文档吧…

官方文档

https://svgjs.com/
https://www.w3.org/TR/SVG/

参考文档

https://www.cnblogs.com/mcbye/p/svg1.html
https://www.cnblogs.com/mcbye/p/svg2.html
http://www.htmleaf.com/html5/SVG/201501301301.html