path标签概述
他是由命令及其参数组组成的字符串，如：
<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">
命名规范
- 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置
- 最后的参数表示最终要到达的位置
- 上一个命令结束的位置就是下一个命令开始的位置
- 命令可以重复参数表示重复执行同一条命令
命令简介
- M (x, y)+ 移动画笔，后面如果有重复参数，会当做是 L 命令处理
- L (x, y)+ 绘制直线到指定位置
- H (x)+ 绘制水平线到指定的 x 位置
- V (y)+ 绘制竖直线到指定的 y 位置
- m、l、h、v 使用相对位置绘制
命令 | 含义 |
M/m (x,y)+ | 移动当前位置 |
L/l (x,y)+ | 从当前位置绘制线段到指定位置 |
H/h (x)+ | 从当前位置绘制⽔平线到达指定的 x 坐标 |
V/v (y)+ | 从当前位置绘制竖直线到达指定的 y 坐标 |
Z/z | 闭合当前路径 |
C/c (x1,y1,x2,y2,x,y)+ | 从当前位置绘制三次⻉塞尔曲线到指定位置 |
S/s (x2,y2,x,y)+ | 从当前位置光滑绘制三次⻉塞尔曲线到指定位置 |
Q/q (x1,y1,x,y)+ | 从当前位置绘制⼆次⻉塞尔曲线到指定位置 |
T/t (x,y)+ | 从当前位置光滑绘制⼆次⻉塞尔曲线到指定位置 |
A/a (rx,ry,xr,laf,sf,x,y) | 从当前位置绘制弧线到指定位置 |
移动与直线类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
d 定义路径，是一些列的命令集合
M/m（x,y） 定义起始点，没有什么效果
-->
<path d='M20,20' stroke='red'></path>
<!--
L/l 绘制线段(x,y)+
L 绝对位置，绘制线段，移动到某一处坐标，可以使用M重新定义起点
l 相对位置，绘制线段，移动到某一处坐标，可以使用m重新定义起点
-->
<path d='M20,20 L10,50 M30,30 L50,50' stroke='red'></path>
<path d='m20,20 l10,50 m30,30 l50,50' stroke='blue'></path>
</svg>
<svg>
<!--
路径命令：小写是相对位置，大写是绝对位置
H/h（x） 水平方向绘制直线
-->
<path d='m20,20 h50,150 ' stroke='red'></path>
<!-- 结合L命令一起使用
多个命令，要用m移动到另一端使用
-->
<path d='m20,50 h150 m50,50 l150,100' stroke='green'></path>
<!-- 垂直方向绘制线段
V /v(y)+ 绘制竖直线到指定的 y 位置
-->
<path d='m100,60 v 120' stroke='green'></path>
</svg>
<svg>
<!--
z 闭合当前路径
表示结束，并且和开始的起点连起来
-->
<path d="m30,100 h10 l50 0 v50 z" stroke='orange' fill="none"></path>
</svg>
</body>
</html>贝塞尔曲线
二次
三次
光滑曲线
贝塞尔图形
C与S
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
三次贝塞尔曲线
C
需要定义三个点：m的起始点,两个控制点 结束点
-->
<path d="M10,10 C100,100 100,150 150,10" fill="none" stroke='red'></path>
<!-- 绘制参考点 -->
<rect x=110 y=110 width=5 height=5></rect>
<rect x=150 y=110 width=5 height=5></rect>
<!-- 绘制参考线 -->
<path d="M10,10 L100 100,150 100,150 10,300" fill="none" stroke='green'></path>
</svg>
<svg>
<!--
三次贝塞尔曲线
S x2 y2 ,x y
用来表示四次贝塞尔曲线（反射性贝塞尔），在原有三次贝塞尔曲线上，加上一段贝塞尔曲线，
所以是与c一起使用（组合）
-->
<path d="M10,50 C40,10 60,10 90,50 S150,100 180,50" fill="none" stroke='red'></path>
<!-- 绘制参考点 -->
<rect x=40 y=10 width=5 height=5></rect>
<rect x=60 y=10 width=5 height=5></rect>
<rect x=150 y=100 width=5 height=5></rect>
<rect x=120 y=100 width=5 height=5></rect>
<!-- 绘制参考线 -->
<!-- <path d="M10,10 L100 100,150 100,150 10,300" fill="none" stroke='green'></path> -->
</svg>
</body>
</html>q与t
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
二次贝塞尔曲线
Q/q x1 y1 ,x y
需要定义三个点：m的起始点,一个控制点 结束点
-->
<path d="m100,50 q100,150 180,10" fill="none" stroke='red'></path>
<!-- 绘制参考点 -->
<rect x=200 y=150 width=5 height=5></rect>
</svg>
<svg>
<!--
光滑二次贝塞尔曲线
T/t x y
t和s差不多，也是一个贝塞尔曲线的延长，会根据q的控点和终点对称的一个控制点，
所以只需要定义一个终点就可以了
注意：c与s q与t搭配的 t的距离是相对于q的终点绘制的
-->
<path d="m10,10 q50,100 100,30 t80,50" fill="none" stroke='red'></path>
</svg>
</body>
</html>弧线
基本命令
- A (rx, ry, xr, laf, sf, x, y) - 绘制弧线
- 最复杂的命令
- rx - （radius-x）弧线所在椭圆的 x 半轴长
- ry - （radius-y）弧线所在椭圆的 y 半轴长
- xr - （xAxis-rotation）弧线所在椭圆的长轴角度
- laf - （large-arc-flag）是否选择弧长较长的那一段弧
- sf - （sweep-flag）是否选择逆时针方向的那一段弧
- x, y - 弧的终点位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg {
width: 500px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<!--
• A (rx, ry, xr, laf, sf, x, y) - 绘制弧线
• rx - （radius-x）弧线所在椭圆的 x 半轴长
• ry - （radius-y）弧线所在椭圆的 y 半轴长
• xr - （xAxis-rotation）弧线所在椭圆的长轴角度
• laf -[0,1] （large-arc-flag）是否选择弧长较长的那一段弧
• sf - [0,1]（sweep-flag）是否选择逆时针方向的那一段弧
• x, y - 弧的终点位置
-->
<svg>
<!--
顺时针绘制大弧线
laf=1
sf=1
-->
<path d="m100,100 a200,100 0 1 1 100,100" fill='none' stroke='red'></path>
</svg>
<!--
视野比视窗大：缩小
视野比视窗小：放大
视野与视窗同等大小，则不放大也不缩小
-->
<svg viewBox='-200 0 500 300'>
<!--
逆时针绘制大弧线
laf=1
sf=0
-->
<path d="m100,100 a200,100 0 1 0 100,100" fill='none' stroke='red'></path>
</svg>
<svg viewBox='0 0 500 300'>
<!--
逆时针绘制小弧线
laf=0
sf=0
-->
<path d="m100,100 a200,100 0 0 0 100,100" fill='none' stroke='red'></path>
</svg>
<svg viewBox='0 0 500 300'>
<!--
顺时针绘制小弧线
laf=0
sf=1
-->
<path d="m100,100 a200,100 0 0 1 100,100" fill='none' stroke='red'></path>
</svg>
<svg viewBox='0 0 500 300'>
<!--
xr - （xAxis-rotation）弧线所在椭圆的长轴角度
-->
<path d="m100,100 a100,50 150 1 1 100,100" fill='none' stroke='red'></path>
</svg>
</body>
</html>制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
