SVG的path路径标签怎么写 SVG路径命令详解

SVG 标签通过 d 属性中的命令（如 M/L/Z/C/Q/A 等）定义矢量路径，大小写区分绝对/相对坐标，支持直线、贝塞尔曲线、椭圆弧及闭合路径。

SVG 的 标签是矢量图形中最灵活、功能最强大的绘图元素，它通过一系列命令和坐标参数定义形状轮廓。以下是 SVG 路径命令的详细写法与含义说明：

一、path 标签基本结构

标签必须包含 d 属性，该属性由字母命令与数值坐标组成，构成路径指令序列。所有命令不区分大小写，但大小写含义不同：小写为相对坐标，大写为绝对坐标。

1、 是一个合法的最小完整路径，表示从 (10,10) 移动到 (50,50) 再闭合。

2、d 属性值中空格、逗号、换行均可作为分隔符，但推荐统一使用空格提高可读性。

3、路径命令后若未指定足够参数，浏览器将忽略后续无效部分，不报错但可能渲染异常。

二、移动与直线命令

M（Move To）用于设置起始点，L（Line To）绘制直线段，两者均支持绝对与相对形式。M 后可接多组坐标以定义多个子路径起点。

1、M 20 30 表示将画笔移动到绝对坐标 (20,30)；m 10 5 表示从当前位置向右移 10、向下移 5。

2、L 40 60 70 90 表示依次绘制两条线段：(20,30)→(40,60)→(70,90)；l 5 -10 15 0 表示连续相对位移。

3、H 和 V 是水平/垂直线快捷命令：H 80 等价于 L 80 y_current；v -20 等价于 l 0 -20。

三、曲线命令详解

C（三次贝塞尔）、S（平滑三次贝塞尔）、Q（二次贝塞尔）、T（平滑二次贝塞尔）、A（椭圆弧）用于绘制各类曲线。每种命令需严格匹配参数数量与语义逻辑。

1、C x1 y1 x2 y2 x y：以 (x1,y1) 为起点控制点、(x2,y2) 为终点控制点，绘制至 (x,y) 的三次贝塞尔曲线。

2、S x2 y2 x y：隐式复用前一个 C/S 命令的对称控制点，仅需提供新终点控制点与终点坐标。

3、Q x1 y1 x y：以 (x1,y1) 为唯一控制点，绘制至 (x,y) 的二次贝塞尔曲线；T x y 则自动推导控制点并绘制平滑连接。

四、椭圆弧命令 A 的参数解析

A 命令用于绘制椭圆弧段，语法复杂但精确可控。其六个参数依次为：rx ry x-axis-rotation large-arc-flag sweep-flag x y。

1、rx 和 ry 分别指定椭圆的横纵半轴长度，单位与 SVG 坐标系一致。

2、x-axis-rotation 表示椭圆长轴相对于 X 轴的旋转角度（度数），顺时针为正。

3、large-arc-flag（0 或 1）决定选择大弧还是小弧；sweep-flag（0 或 1）决定绘制方向（0=逆时针，1=顺时针）。

4、示例：A 30 20 0 0 1 100 50 表示：半轴 30×20、无旋转、取小弧、顺时针、终点为 (100,50)。

五、闭合与特殊命令

Z（Close Path）命令强制绘制一条直线，从当前点回到该子路径的初始点，完成闭合。它不接受任何参数，且大小写等效。

1、Z 命令会重置当前点为最近一次 M 或 m 的坐标，无论中间经过多少次移动或曲线。

2、Z 后可继续追加其他命令，此时新命令基于闭合后的起点位置执行。

3、Z 不影响 fill 效果的判断逻辑，即使未显式写出，某些渲染引擎仍按视觉闭合处理填充。

# svg  # 浏览器  # 塞尔  # 顺时针  # 是一个  # 多个  # 半轴  # 均可  # 两条  # 报错  # 相对于  # 它不 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 网络优化76771 】 【 技术知识130152 】 【 IDC云计算60162 】 【 营销推广131313 】 【 AI优化88182 】 【 百度推广37138 】 【 网站推荐60173 】 【 精选阅读31334 】

相关推荐： Python网络异常模拟_测试说明【指导】  Win11怎么设置环境变量_Win11配置Path路径变量【详解】  Windows10如何重置此电脑_Windows10电脑重置方法【步骤】  php修改数据怎么批量改状态_批量更新status字段值技巧【操作】  如何在Golang中处理通道发送接收错误_防止阻塞或panic  Python项目维护经验_长期演进说明【指导】  Win11怎么设置DNS服务器_Windows11修改网络适配器DNS优选  Win10怎么更改用户名 Win10修改账户名称操作教程  Windows怎样拦截QQ浏览器广告_Windows拦截QQ浏览器广告方法【方法】  Win11任务栏怎么固定应用 Win11将软件图标固定到底部【步骤】  C++如何获取CPU核心数？（std::thread::hardware_concurrency）  Win11怎么清理C盘系统日志_Win11清理系统日志文件【步骤】  phpstudy本地环境mysql忘记密码_重置mysqlroot密码操作流程【解答】  用lighttpd能运行php吗_lighttpd配置php步骤【教程】  Win11怎么设置多显示器任务栏 Win11扩展任务栏至多屏方便跨屏操作【技巧】  PHP主流架构如何处理会话管理_Session与Cookie【技巧】  XML的“混合内容”是什么 怎么用DTD或XSD定义  c++如何实现一个高性能的环形队列(Ring Buffer)_c++无锁实现方法【并发】  如何使用Golang安装API文档生成工具_快速生成接口文档  c++中如何计算坐标系中两点间距离_c++勾股定理求距离  c++如何获取map中所有的键_C++遍历键值对提取所有key的方法  VSC里PHP变量未定义报错怎么解决_错误抑制技巧【解答】  如何在Golang中使用time处理时间_Golang time时间解析与格式化方法  如何使用Golang捕获并记录协程panic_保证主程序稳定运行  PHP主流架构怎么集成Redis缓存_配置步骤【方法】  Windows10系统怎么查看防火墙状态_Win10安全中心网络保护  如何在Golang中处理二进制数据_Golang io与encoding/binary二进制操作方法  Windows如何拦截腾讯视频广告_Windows拦截腾讯视频广告方法【方法】  Win11怎么设置麦克风权限_允许应用访问Win11麦克风【详解】  如何在JavaScript中动态拼接PHP的base_url与JS变量  如何在 Windows 11 中使用 AlomWare 工具箱  如何使用Golang实现微服务状态监控_Golang服务运行状态采集方法  c++中如何进行二进制文件读写_c++ read与write函数用法  c++中的std::conjunction和std::disjunction是什么_c++模板元编程逻辑运算【C++17】  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  如何使用Golang encoding/json解析JSON_Golang encoding/json解析与序列化示例  如何在Windows上设置闹钟和计时器_系统自带的时钟应用全攻略【生活技巧】  如何使用Golang实现路由参数绑定_使用Mux和Request解析路径变量  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  php内存溢出怎么排查_php内存限制调试与优化方法【说明】  Win11怎么把图标拖到任务栏_Win11固定应用快捷方式指南【方法】  Windows10系统怎么查看显卡型号_Win10 dxdiag显示选项卡  LINUX怎么设置系统语言_LINUX修改中文环境  c++如何利用doxygen生成开发文档_c++ 代码注释规范与HTML文档导出【案例】  c++如何连接Redis c++ hiredis库使用教程【指南】  Mac怎么查看活动监视器_理解Mac进程和资源占用【指南】  Win11怎么开启移动热点_Windows11共享网络给手机设置教程  Win11局域网共享怎么设置 Win11文件夹网络共享教程【详解】  如何在 Go 中比较自定义的数组类型（如 [20]byte）  Win11如何连接Xbox手柄 Win11蓝牙连接游戏手柄教程【步骤】 

 2025-12-23