整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SVG中，使用 path 标签来定义一个路径。它是一个单标签，基本语法为：尖角号 path，斜线尖角号。应用路径，我们可以绘制任意形状的图形。
path标签的重要属性 d，用来定义绘制路径的命令，d 是 draw 的缩写，就是绘制的意思。
绘制路径的命令有很多，先看两个常用的命令：
M 命令，是 moveto 的缩写，定义绘制图形的起点坐标。例如 M 150 0 (大M，空格，150，空格，0)，也可以写成 M150 0 (大M, 150，空格，0) ，表示路径从屏幕坐标的 x 150，y 0 (直接读) 这个点开始绘制。
L 命令，是 lineto 的缩写，用来绘制一条直线。例如 l 75 200 (读小l，空格，75，空格，200) ，也可以写成 l75 200 (读作小l，75，空格，200)，表示从上一个结束点到 x 75，y 200 (直接读) 这个点绘制一条直线。
注意：命令的字母大小写，表示的意义是不同的。大写字母表示绝对定位，小写字母表示相对定位。绝对定位是相对于屏幕坐标原点的位置，相对定位是相对于上一个绘制点的位置。
打开编辑器，新建一个 path.html 文件，补全基础代码，在 body 里添加一个 svg 标签，定义属性 width 等于 400，height 等于 210。
在 svg 里添加 path 标签，定义属性 d，它的值定义为 "M150 0 L75 200 L225 200"。保存文件。
在浏览器中预览，一个具有默认黑色的三角形就绘制好了。
这里你可能会问：用 polygon 绘制多边形不也可以吗，为什么用 path 呢？其实，path 的绘制能力非常强，比如绘制一条贝塞尔曲线。
“贝赛尔曲线”是由法国数学家皮埃尔·贝塞尔（Pierre Bézier）发明的，由此为计算机矢量图形学奠定了基础。
在 path 中，绘制“贝赛尔曲线” 使用 Q 命令。
Q 是 quadratic Bézier curve ([k??rv]) 的缩写，用来绘制二次贝塞尔曲线，需要定义控制点和终点的坐标。例如 q 150 -300 300 0，表示控制点坐标是 x 150，y -300，终点坐标是 x 300，y 0。这个比较难理解，大家来看一下二次贝塞尔曲线绘制示意图。
回到编辑器，为了强化练习，我们来绘制一张二次贝塞尔曲线模拟静态图。(此时会展示绘制完以后的效果图)
A为起点，B为控制点，C为终点。在AB，BC 两条红色的线段上，有一条绿色的切线，蓝色的为绘制的贝塞尔曲线。
我们先来绘制三个点。在上个 svg 结尾处添加一个 br 标签。回车换行。
添加一个新的 svg 标签，属性 width 等于 450，height 等于 400。
我首先绘制三个点。在 svg 标签里添加一个 circle 标签，定义属性 cx 等于 100，cy 等于 350，r 等于 3。
复制两个 circle，分别改写一下圆心的位置坐标。
这里我们能成组的给三个小圆定义颜色等属性吗？可以的。
在SVG中，我们可以使用 g 标签把多个绘图元素包裹起来，在 g 标签上定义公共的属性。
我们给三个小圆定义一个父标签 g，定义属性 fill，值为 black。保存。
回到浏览器，刷新，三个小圆点做好了。
接下来绘制三个点的名称。
回到编辑器，再创建一个 g 标签，在 g 标签里添加一个 text 标签，填入文本大写字幕 A。给 text 定义属性 x 等于 100，y 等于 350，dx 等于 -30。
复制两份 text 标签，修改文本内容分别为 B，和 C。再修改一下属性。
最后给 g 定义三个文本的公共属性，font-size 等于 30，fill 等于 black，text-anchor 等于 middle。保存。
回到浏览器，刷新，三个点的名称定义好了。
接下来绘制AB，BC两条线段。
回到编辑器，在 svg 里的首行创建一个 path 标签，定义 d 属性，值为 "M 100 350 l 150 -300" (直接读，注意那个小 l ) ，定义 stroke 属性，值为 red，定义 stroke-width 属性，值为 3，fill 属性，值为 none。
复制一个 path，修改一下 d 属性的值。保存。
回到浏览器，刷新，两条红色的线段绘制好了。
接下来绘制绿色的切线。
回到编辑器，创建第三个 path 标签，定义 d 属性，值为 "M 175 200 l 150 0" (直接读，注意那个小 l ) ，定义 stroke 属性，值为 green，定义 stroke-width 属性，值为 3，fill 属性，值为 none。保存。
回到浏览器，刷新，一条绿色的切线绘制好了。
最后绘制主角儿，贝塞尔曲线。
回到编辑器，创建第四个 path 标签，定义 d 属性，值为 "M 100 350 q 150 -300 300 0" (直接读，注意大M，小 q ) ，定义 stroke 属性，值为 blue，定义 stroke-width 属性，值为 5，fill 属性，值为 none。保存。
回到浏览器，刷新，完整的二次贝塞尔曲线模拟图就绘制好了。
返回编辑器，我们可以把辅助的点和线都去掉，保存。
回到浏览器，刷新，只显示了第四条 path 路径，贝塞尔曲线！
文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=48
我个人的博客网站树下魅狐的首页，使用了SVG路径动画来绘制LOGO。该动画采用SVG+CSS的方式完成的。今天在这里快速的分享一下制作过程。
SVG是用于描述二维图形的一种语言。SVG允许使用三种类型的图形对象：矢量图形(例如：由直线和曲线组成的路径)，图像和文本。图形对象可以进行分组，样式设置，转换和合成。SVG和XML文件混合使用时，它可以使用XML语法，当SVG和HTML文件混合使用时，它又可以使用HTML的语法。
SVG的全称是Scalable Vector Graphics，翻译过来是可伸缩矢量图形。因此，SVG图形在放大或缩小的情况下其图形的质量不会有损失。SVG除了可以制作图像外，还可以用于制作各种小动画。在使用SVG之前，先得了解一下各大浏览器对其兼容性，下面通过一张图片来详细了解：
在开始介绍制作过程之前，通过一个动画了解一下最终的动画形态：
第一步，我们可以通过Adobe Illustrator软件生成一个自己想要的SVG路径。在本例中，我将字符“RAMOSTEAR”通过Adobe Illustrator生成了路径并导出到编辑器中，代码如下：
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 938.57 122.65">
<g>
<path id="p1" class="cls-1"
d="M86.87,39.76c0-27.22-19.94-35.65-44.18-35.65H2V118.54H28V77.37h13.6l21.84,41.17h29L66.49,72.78C78.71,67.26,86.87,56.57,86.87,39.76ZM28,24.66H40.58c13.6,0,20.9,3.8,20.9,15.1s-7.3,17.06-20.9,17.06H28Z"/>
<path id="p2" class="cls-1"
d="M132.31,4.11,96.67,118.54h26.51l7-27.22H164.6l6.94,27.22H199L163.36,4.11Zm3,67,2.71-10.55c2.9-11.42,6.08-24.82,8.88-36.9h.7c2.75,12.08,6.24,25.48,9.14,36.9l2.68,10.55Z"/>
<path id="p3" class="cls-1"
d="M257.33,44.66l-3.79,15.83h-.71L249,44.66,237.77,4.11H210.62V118.54h21.55V83.11c0-12.88-2.17-40.78-3.48-53.15h.61l8.19,30.71,9.06,27.57h12.57L268,60.67,276.8,30h.52c-1.21,12.37-3.47,40.27-3.47,53.15v35.43h21.91V4.11H268.59Z"/>
<path id="p4" class="cls-1"
d="M358.53,2c-27.25,0-46,20.56-46,58.8,0,39.14,18.77,59.85,46,59.85s46-20.71,46-59.85C404.56,22.56,385.79,2,358.53,2Zm0,96.28c-11.93,0-19.47-12.8-19.47-37.48,0-23.78,7.54-36.43,19.47-36.43S378,37,378,60.8C378,85.48,370.47,98.28,358.53,98.28Z"/>
<path id="p5" class="cls-1"
d="M483.46,54l-14-5.93c-11-4.12-18.64-6.64-18.64-13.52,0-6.69,5.79-10.22,14.32-10.22,11.18,0,18.31,3.15,26.37,8.94L504.55,17a55.46,55.46,0,0,0-38-15c-24.86,0-41.93,15.15-41.93,34.1,0,16.65,11.57,26.38,24.25,31.2l14.91,6.36c10.83,4.54,17.63,6.53,17.63,14.77,0,5.59-5.08,9.85-16.07,9.85s-21.76-4.86-30.42-12l-14.86,17.79a65.91,65.91,0,0,0,43.57,16.53c28.32,0,44.28-16.48,44.28-35.5C507.9,69,498.44,59.66,483.46,54Z"/>
<polygon id="p6" class="cls-1"
points="521.97 25.82 556.28 25.82 556.28 118.54 582.18 118.54 582.18 25.82 616.48 25.82 616.48 4.11 521.97 4.11 521.97 25.82"/>
<polygon id="p7" class="cls-1"
points="664.01 70.49 706.45 70.49 706.45 48.77 664.01 48.77 664.01 25.82 713.97 25.82 713.97 4.11 638.11 4.11 638.11 118.54 715.72 118.54 715.72 96.82 664.01 96.82 664.01 70.49"/>
<path id="p8" class="cls-1"
d="M764.4,4.11,728.76,118.54h26.5l7-27.22h34.43l7,27.22h27.45L795.44,4.11Zm3,67,2.7-10.55c2.9-11.42,6.08-24.82,8.88-36.9h.7c2.76,12.08,6.24,25.48,9.14,36.9l2.69,10.55Z"/>
<path id="p9" class="cls-1"
d="M935.14,118.54,909.27,72.78c12.22-5.53,20.38-16.21,20.38-33,0-27.22-19.94-35.65-44.19-35.65H844.78V118.54h26V77.37h13.6l21.84,41.17ZM870.73,24.66h12.63c13.6,0,20.9,3.8,20.9,15.1s-7.3,17.06-20.9,17.06H870.73Z"/>
</g>
</svg>
借助工具，可以快速生成我们想要的图形，你也可以手动书写，但效率很低（不推荐）
我们将上述的代码插入到事先准备好的HTML文件中，然后通过JavaScript来获得每个路径的总长度。首先，将SVG代码插入到HTML代码中，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>SVG TEXT ANIMATION</title>
</head>
<body>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 938.57 122.65">
//...
</svg>
<script src="js/app.js"></script>
</body>
</html>
接下来，在app.js中通过querySelectorAll()函数获取所有的路径，并通过getTotalLength()函数来获得每一个路径的总长度，代码如下：
const paths=document.querySelectorAll("#logo path");
const polygons=document.querySelectorAll("#logo polygon");
for(let i=0;i<paths.length;i++){
console.log(paths[i].getAttribute("id")+" -> "+paths[i].getTotalLength());
}
for(let i=0;i<polygons.length;i++){
console.log(polygons[i].getAttribute("id")+" -> "+polygons[i].getTotalLength());
}
说明：
在使用Adobe Illustrator导出SVG时，不完全是路径(path),还参杂着两个多边形(polygon),所以还需获得polygon的路径长度。
在浏览器中打开HTML文件，你可以在控制台中看到如下的日志信息：
app.js:3 p1 -> 587.9400634765625
app.js:3 p2 -> 537.8978271484375
app.js:3 p3 -> 756.9060668945312
app.js:3 p4 -> 523.8944091796875
app.js:3 p5 -> 525.183349609375
app.js:3 p8 -> 537.9104614257812
app.js:3 p9 -> 587.8800048828125
app.js:8 p6 -> 417.8800048828125
app.js:8 p7 -> 568.8799438476562
这样，我们就获得了所有图形的路径长度。接下来，就可以在CSS文件中操作这些参数。
前面我们已经获取了所有图形的路径总长度，现在就可以利用CSS3的@keyframes和animation来定义动画。动画的定义很简单，主要是改变路径的stroke-dasharray和stroke-dashoffset两个参数。stroke-dasharray用于设置路径的总长度，stroke-dashoffset用于设置路径的偏移量。一开始，将各路径的长度和偏移量都设置为同一个值，然后再利用animation将偏移量变为0，这样就可以形成一个类似手写文字的动画效果。主要的CSS代码如下：
.cls-1{
stroke: #fff;
stroke-width: 2px;
}
#logo{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: text-fill-anim 0.5s ease forwards 4s;
}
#p1{
stroke-dasharray: 587.9400634765625;
stroke-dashoffset: 587.9400634765625;
animation: text-anim 3s ease forwards;
}
#p2{
stroke-dasharray: 537.8978271484375;
stroke-dashoffset: 537.8978271484375;
animation: text-anim 3s ease forwards 0.2s;
}
#p3{
stroke-dasharray: 756.9060668945312;
stroke-dashoffset: 756.9060668945312;
animation: text-anim 3s ease forwards 0.4s;
}
#p4{
stroke-dasharray: 523.8944091796875;
stroke-dashoffset: 523.8944091796875;
animation: text-anim 3s ease forwards 0.6s;
}
#p5{
stroke-dasharray: 525.183349609375;
stroke-dashoffset: 525.183349609375;
animation: text-anim 3s ease forwards 0.8s;
}
#p6{
stroke-dasharray: 417.8800048828125;
stroke-dashoffset: 417.8800048828125;
animation: text-anim 3s ease forwards 1s;
}
#p7{
stroke-dasharray: 568.8799438476562;
stroke-dashoffset: 568.8799438476562;
animation: text-anim 3s ease forwards 1.2s;
}
#p8{
stroke-dasharray: 537.9104614257812;
stroke-dashoffset: 537.9104614257812;
animation: text-anim 3s ease forwards 1.4s;
}
#p9{
stroke-dasharray: 587.8800048828125;
stroke-dashoffset: 587.8800048828125;
animation: text-anim 3s ease forwards 1.6s;
}
@keyframes text-anim {
to{
stroke-dashoffset: 0;
}
}
@keyframes text-fill-anim {
to{
fill: white;
}
}
这样，通过简单的三步，一个SVG+CSS的路径动画就制作完成了。
说明：
JS文件中的函数主要是辅助我们计算每个图形的路径长度，在动画制作完成后，可以将其删除。
你可以通过下面的一段视频，了解整个动画的制作过程。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
自己动手写SVG路径动画(零基础三步曲视频教程)
SVG 中我们可以使用 <path> 元素来定义路径。<path> 的功能很强大，既可以创建基本的图形，也可以创建更复杂的形状。<path> 路径是由一些命令来控制的，每个命令对应一个字母，字母区分大小写。
<path> 元素可以用于定义路径，元素中有一个 d 属性，这个 d 属性是一系列命令的集合。
<path> 元素中支持下列命令，如果是大写命令表示绝对定位，小写则表示相对定位：
命令 | 参数 | 描述 |
M | x y | 移动画笔到给定坐标，即起始点 |
L | x y | 绘制一条到给定坐标的线，可提供多组坐标绘制折线 |
H | x y | 绘制一条到 x 坐标的横线 |
V | y | 绘制一条到 y 坐标的竖线 |
C | x yx1 y1 x2 y2 | 绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为曲线的开始控制点，（x2,y2）为曲线的终点控制点 |
S | x y x1 y1 | 绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为新端点的控制点 |
Q | x y x1 y1 | 绘制一条从当前点到（x,y），控制点为（x1,y1）的二次贝塞尔曲线 |
T | x y | 绘制一条从当前点到（x,y）的二次贝塞尔曲线 |
A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 绘制当前点到（x,y）的椭圆弧，椭圆弧的 x，y轴半径分别为 rx,ry。椭圆相对于 x 轴旋转 x-axis-rotation 度。large-arc-flag 等于0表示弧线小于180度，等于1表示弧线大于180度。sweep-flag 等于0 表示弧线逆时针旋转，等于1表示弧线顺时针选装 |
Z | 闭合路径 |
示例：
例如我们使用路径命令绘制一个矩形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="500">
<path d="M50 50 L200 50 L200 150 L50 150 Z" style="fill:#f5bf8d;" />
</svg>
</body>
</html>
在浏览器中的演示效果：
其中 M 命令指定了开始点的位置，即左上角 (50,50)，L 命令可以用于绘制一条直线段，这个直线段从当前位置移到指定位置。上述三个 L 位置分别为右上角 (200,50)、右下角 (200,150)、左下角(50,150)。Z 命令为闭合路径命令。
使用 <path> 中的 A 和 a 命令，可以绘制圆弧，使用 A 命令（绝对坐标）作为其端点，a 命令（相对坐标） 作为起点。
示例：
例如下面这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px" >
<path d="M50,40 A30,50 0 0,1 100,110" fill="transparent" stroke="green"/>
</svg>
</body>
</html>
在浏览器中的演示效果：
从代码中可以看到，这段弧线的起点为 (50,40)，终点为(100, 110)，圆弧的半径为 A 命令上的前两个参数，即 rx 为30，ry 为 50。A 命令上的第三个参数为 x-axis-rotation， 被设置为了0，第四个 large-arc-flag 的值等于 0 ，这表示弧线小于180度。
链接：https://www.9xkd.com/
*请认真填写需求信息，我们会在24小时内与您取得联系。
