本文介绍了SVG的path元素，详细讲解了d属性中的M、H、V、L和C指令的使用，包括如何绘制直线、曲线，并通过实例展示了这些指令创建的动画效果。
一、svg 的 path 介绍
1.1 path元素的形状是通过属性d来定义的，属性d的值是一个命令+参数的序列。
1.2 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(QX,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(TENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
二、path部分指令的使用
2.1 M H V L 指令
M 起点X，起点Y H（水平线）终点X V（垂直线）终点Y L（直线）终点X，终点Y
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path stroke="black" stroke-width="1px" d="M20 20 H100 M20 20 V100 M20 20 L100 100"/>
</svg>
运行结果：
2.2 M H V L 指令动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>svg path</title>
<style type="text/css
最低0.47元/天 解锁文章
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
