1、SVG.js包简介
SVG.js是用于绘制矢量图和制作矢量动画的轻量级js库。
官网：https://svgjs.com/
（1）SVG.js包的开发文档
W3C关于SVG.js包的文档（英文）
https://www.w3.org/TR/SVG/
SVG.js包的英文开发文档，可以在官网和W3C上看到，但是中文的开发文档我没有找到，如果感觉英文看不习惯，可以使用Google浏览器，它的右上角有个按钮，点击“翻译此页”能够翻译整个网页。
2、SVG.js安装与入门
2.1 下载SVG.js包
（1）在SVG.js官网上下载
2.x版本下载地址：https://svgjs.com/docs/2.7/installation/
3.x版本下载地址：https://svgjs.com/docs/3.0/installation/
（2）在github上下载
下载地址：https://github.com/svgdotjs/svg.js
（3）在CNDJS上下载SVG.js包
SVG.js有很多版本，如果需要下载其他版本可以在CDNJS上下载。在CDNJS上，不仅可以搜索和下载js库，还可以找到相应js库的官网和github。
CDNJS的网址：https://cdnjs.com/
2.2 SVG.js入门
导入SVG.js包，绘制一个矩形
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制矢量图</title>
<script type="text/javascript" src="js/svg-2.7.1.min.js" ></script>
</head>
<body>
<div id="drawing"></div>
</body>
<script type="text/javascript">
//判断浏览器是否支持绘制SVG
if (SVG.supported) {
var drawing = SVG("drawing").size('100%', '100%');
drawing.rect(100, 100).attr({ fill: '#f06' })
}else{
alert("浏览器不支持SVG！")
}
</script>
</html>
3、SVG.js绘制矢量图
3.1 基本介绍
此包能够绘制矩形（rect()）、圆（circle()）、椭圆（ellipse()）、直线（line()）、折线（polyline()）、多边形（polygon()）等，上述的方法比较简单，参见官网开发文档中的Elements目录即可。本段介绍一下绘制path路径中的参数和命令。
绘制path的命令如下：
M = moveto //绘制起始点；
L = lineto //绘制直线；
H = horizontal lineto //绘制水平直线
V = vertical lineto //绘制垂直直线
C = curveto //绘制曲线
S = smooth curveto //绘制平滑曲线
Q = quadratic Bézier curve //二次贝塞尔曲线
T = smooth quadratic Bézier curveto //平滑二次贝塞尔曲线
A = elliptical Arc //绘制椭圆弧线
Z = closepath //终止路径
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
3.2 path路径绘制
注意：绘制路径时必须要有M或者m开头
（1）绘制一条直线（L）
绘制从（0,0）->（50,50）两点的直线，如下：
var pathStr = 'M0 0 L50 50';// L表示绘制直线，需要两个参数；
绘制从（0,0）->（50,0）两点的水平直线，如下：
var pathStr = 'M0 0 H50';//H表示绘制水平直线，仅仅需要一个参数50；
var pathStr = 'M0 0 L50 0';
var pathStr = 'M0 0 50 0';
绘制从（0,0）->（0, 50）两点的垂直直线，如下：
var pathStr = 'M0 0 V50';//V表示绘制垂直直线，仅仅需要一个参数50；
var pathStr = 'M0 0 L0 50';
var pathStr = 'M0 0 0 50';// 也可以不要L
（2）绘制多点折线（L）
绘制从（0,0）->（50, 50）->（20, 40）的折线
var pathStr = 'M0 0 L50 50 20 40';// 可以仅仅在第一个点后加1个L即可
var pathStr = 'M0 0 L50 50 L20 40';// 也可以在每个点前都加L
var pathStr = 'M0 0 50 50 20 40';// 还可以仅仅加1个M
（3）绘制曲线（C）
注意：绘制曲线必须至少4个点，1个起始点、3个曲线点，此外必须是3个点为1组。
绘制从（0,0）->(30,50)->(20,40)->(10,60)的曲线，共4个点。
var pathStr = 'M0 0 C30 50 20 40 10 60';
绘制从（0,0）->(30,50)->(20,40)->(10,60) ->(60,60)->(80,90)->(30,100)的曲线，共7个点。
var pathStr = 'M0 0 C30 50 20 40 10 60 C60 60 80 90 30 100';// 每3个点为1组，可以在前面C；
var pathStr = 'M0 0 C30 50 20 40 10 60 60 60 80 90 30 100';// 也可以在前面加1个C；
注意：如果这3个点(60,60)、(80,90)、(30,100)中缺少任何1个或2个，则这3个点都不能显示。
（4）绘制二次贝塞尔曲线（Q）
贝塞尔曲线类似于曲线，不过它是两个点为1组。
var pathStr = 'M0 0 Q30 50 20 40 Q10 60 60 60';
var pathStr = 'M0 0 Q30 50 20 40 10 60 60 60';
注意：如果这2个点(10,60) 、(60,60)缺少1个2个点都会显示。
（5）其他曲线
平滑曲线（S）的用法与二次贝塞尔曲线（Q）的用法相同。平滑二次贝塞尔曲线（T）与直线（L）的用法相同。
绘制平滑二次贝塞尔曲线（T）
var pathStr = 'M0 0 T30 50 T20 40 T10 60 T10 20';
var pathStr = 'M0 0 T30 50 20 40 10 60 10 20';
（6）绘制椭圆弧线（A）
绘制1椭圆圆弧必须要有7个参数，参数组成A rx ry x-axis-rotation large-arc-flag sweep-flag x y。
第1个参数rx：X轴的半径；
第2个参数ry：Y轴的半径；
第3个参数x-axis-rotation：弧线沿着X轴的旋转，一般默认为0；
第4个参数large-arc-flag：最大角度标识符号，只能是0或1，一般默认为1。
第5个参数sweep-flag：标识绘图的方向只能是0或1，1表示顺时针绘制弧线，0表示逆时针绘制弧线。
第6个参数sweep-flag：圆弧的结束点X；
第7个参数sweep-flag：圆弧的结束点Y；
绘制1个弧线
var pathStr = 'M50 0 A20 20 0 0 0 100 50';
绘制2个弧线
var pathStr = 'M50 0 A20 20 0 0 0 100 50 A20 20 0 0 1 200 200';
var pathStr = 'M50 0 A20 20 0 0 0 100 50 20 20 0 0 1 200 200';
运行结果如下：
4、实现的源代码
// 要看上述的代码结果，只需要替换下述的代码中相应部分的代码即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制矢量图</title>
<script type="text/javascript" src="js/svg-2.7.1.min.js" ></script>
</head>
<body>
<div id="drawing"></div>
</body>
<script type="text/javascript">
//判断浏览器是否支持绘制SVG
if (SVG.supported) {
var drawing = SVG("drawing").size('300', '300');
// 绘制2个弧线
var pathStr = 'M50 0 A20 20 0 0 0 100 50 20 20 0 0 1 200 200';
var path = drawing.path(pathStr);
// 无填充
path.fill('none');
// 设置线条的颜色、宽度、连接点形状
path.stroke({ color: '#f06', width: 2, linecap: 'round', linejoin: 'round' });
}else{
alert("浏览器不支持SVG！")
}
</script>
</html>
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
