{T}

路径绘制

<path> 是 SVG 中最强大、最灵活的绘图元素,可以创建几乎任何复杂的矢量图形。它通过一系列命令和坐标来定义路径,支持直线、曲线、弧线等多种绘制方式。

路径基础

基本语法

html
<path d="路径数据" [其他属性...] />

路径数据属性

属性描述取值默认值
d定义路径的命令和坐标路径命令字符串必需

路径命令

路径命令分为两类:

  1. 绝对坐标命令(大写字母): 以画布坐标系为基准
  2. 相对坐标命令(小写字母): 以前一个点为基准

常用路径命令

命令描述示例说明
M/m移动到M10,10 或 m10,10移动到指定点,不绘制线条
L/l直线到L100,100 或 l50,50从当前点画直线到指定点
H/h水平线H200 或 h100画水平线到指定 x 坐标
V/v垂直线V150 或 v50画垂直线到指定 y 坐标
Z/z闭合路径Z 或 z从当前点画直线到路径起点
C/c三次贝塞尔曲线C100,50 150,150 200,100从当前点到指定点绘制三次贝塞尔曲线
S/s平滑三次贝塞尔曲线S200,200 250,150相对前一个控制点的对称点绘制曲线
Q/q二次贝塞尔曲线Q150,100 200,150从当前点到指定点绘制二次贝塞尔曲线
T/t平滑二次贝塞尔曲线T250,200相对前一个点的对称点绘制曲线
A/a椭圆弧线A50,30 0 0 1 200,100绘制椭圆弧线

直线命令

移动命令 M/m

html
<svg width="200" height="200">
  <path d="M10,10 L50,50" stroke="black" fill="none"/>
</svg>

直线命令 L/l

html
<svg width="200" height="200">
  <path d="M10,10 L100,100 L190,10" stroke="blue" fill="none"/>
</svg>

水平线 H/h

html
<svg width="200" height="200">
  <path d="M10,10 H190" stroke="green" fill="none"/>
</svg>

垂直线 V/v

html
<svg width="200" height="200">
  <path d="M100,10 V190" stroke="red" fill="none"/>
</svg>

曲线命令

二次贝塞尔曲线 Q/q

html
<svg width="200" height="200">
  <path d="M10,100 Q50,50 90,100 T170,100" stroke="blue" fill="none"/>
</svg>

三次贝塞尔曲线 C/c

html
<svg width="200" height="200">
  <path d="M10,150 C30,100 70,200 90,150 S150,100 170,150" stroke="green" fill="none"/>
</svg>

弧线命令

椭圆弧线 A/a

html
<svg width="200" height="200">
  <path d="M10,50 A40,20 0 0 1 90,50" stroke="purple" fill="none"/>
</svg>

路径优化

使用相对坐标

相对坐标可以减少路径数据长度。

使用命令缩写

  • H 和 V 比 L 更简洁
  • Z 比 L x,y 更简洁

实际应用

待补充...

参考资源