pathdata中大小写决定坐标基准:大写为绝对坐标(以viewport原点为参考),小写为相对坐标(以上一终点为原点);z仅闭合至路径首个m点,不关联viewport原点。

pathData 指令大小写区别直接影响坐标基准
大写字母(M、L、C、Z)表示绝对坐标,所有数字都以 viewportWidth/viewportHeight 原点(左上角 0,0)为参考;小写(m、l、c、z)是相对坐标,每个点都以前一个终点为原点计算偏移。
容易踩的坑:
- 混用大小写却不注意上下文起点,比如
M10,10 L20,10 l-5,5—— 最后一条l-5,5是从 (20,10) 出发往左5、下5,落到 (15,15),不是从 (10,10) 算起 - 误以为
h或v能省略当前 y/x 值:它们只接受一个参数,h20表示“x 增加 20,y 不变”,不能写成h20,0 - android 不支持
S、Q、T、A的部分变体(如带旋转的椭圆弧A在低版本可能渲染异常),实际项目中优先用C拟合圆角
闭合路径 Z 不等于“画线回起点”,而是自动补线+重置起点
Z(或 z)不带任何参数,作用是:从当前点向**该 path 第一个 M 的坐标**画一条直线,并把绘图起点重置为那个 M 点。它不是“回到上一个 M”,而是回到路径定义中第一个显式 M。
常见错误现象:
- 路径里写了多个
M(比如画两个分离图形),但只在末尾加一个Z—— 它只会闭合最后一个子路径,前面的M开头段不会被闭合 - 用
m开头却指望Z闭合到 (0,0):错。Z只认最近的M,和 viewport 原点无关 - 想镂空(比如圆环),只写一个
Z不够:需用android:fillType="evenOdd"配合两个嵌套路径(外顺时针 + 内逆时针)
C 指令三个坐标对的顺序和物理意义必须严格对应
C x1,y1 x2,y2 x,y 是三次贝塞尔曲线,共 6 个数字:前两对是控制点,最后一对是终点。控制点不在线上,而是像“磁铁”一样牵引曲线走向。
实操建议:
- 别靠脑算——把
pathData复制进 SVG Viewer 或 CodePen 实时预览,改一个数就看效果 - Android 对浮点精度敏感,避免写
C1.0,2 3,4.0 5,6这种混用格式,统一用C1,2 3,4 5,6或C1.0,2.0 3.0,4.0 5.0,6.0 - 若设计稿是圆角矩形,别硬拆成 4 段
C;用工具导出 svg 后转 Vector Asset,比手写稳定得多
从设计稿生成 pathData 的推荐链路不是“手写”,而是“导出 → 转换 → 微调”
手动写复杂 pathData 效率低、易出错,尤其含曲线或文字转矢量的场景。真实开发中,95% 以上的图标应走自动化流程。
使用场景与注意事项:
- figma/Sketch 导出 SVG → android studio 中右键
res→New → Vector Asset → Local file:这是最稳路径,AS 会自动清理冗余指令、归一化坐标 - 如果 SVG 含渐变、滤镜、
text元素,AS 会报错或静默丢弃——导出前务必在设计工具里“轮廓化文字”、“扁平化效果” - 导入后检查
android:viewportWidth和android:viewportHeight是否匹配原始画布尺寸,否则图形会被拉伸或裁切
真正难的不是语法本身,而是 viewport 缩放逻辑和多分辨率下视觉一致性。写错一个 L 顶多图形错位,但 viewport 设错,整个图标在不同屏幕密度上会糊、偏、缩成一团。