SVG.js包的使用

原创最新推荐文章于 2026-09-12 22:34:09 发布 2.1w 阅读 AI写同款

收录于

前端

MasonYyp

码龄9年墨衍会员 · AI 创作全网分发

301粉丝297篇原创

关注

【SVG.js实战篇】01-Vue中优雅的使用SVG.js 一、关于SVG.js SVG.js是一个基于SVG的开源JS库，支持操作 SVG 和执行 SVG 动画。真的很好用！(在实际项目场景中，使用SVG.js很便利友好) github仓库官方文档本文Demo源码二、安装 // npm npm install @svgdotjs/svg.js // yarn yarn add @svgdotjs/svg.js 三、项目中引入 import { SVG } from "@svgdotjs/svg.js" 四、绘制基础图形绘制图形之前，首先需要创阅读详情

AI摘要

本文详细介绍了SVG.js库的使用方法，包括如何安装、基本矢量图形绘制及复杂路径绘制技巧。SVG.js是一个轻量级的JavaScript库，用于在浏览器中创建和操作SVG矢量图形。

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>