Android vector pathData指令 SVG路径语法M L C Z详解

1次阅读

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

Android vector pathData指令 SVG路径语法M L C Z详解

pathData 指令大小写区别直接影响坐标基准

大写字母(MLCZ)表示绝对坐标,所有数字都以 viewportWidth/viewportHeight 原点(左上角 0,0)为参考;小写(mlcz)是相对坐标,每个点都以前一个终点为原点计算偏移。

容易踩的坑:

  • 混用大小写却不注意上下文起点,比如 M10,10 L20,10 l-5,5 —— 最后一条 l-5,5 是从 (20,10) 出发往左5、下5,落到 (15,15),不是从 (10,10) 算起
  • 误以为 hv 能省略当前 y/x 值:它们只接受一个参数,h20 表示“x 增加 20,y 不变”,不能写成 h20,0
  • android 不支持 SQTA 的部分变体(如带旋转的椭圆弧 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,6C1.0,2.0 3.0,4.0 5.0,6.0
  • 若设计稿是圆角矩形,别硬拆成 4 段 C;用工具导出 svg 后转 Vector Asset,比手写稳定得多

从设计稿生成 pathData 的推荐链路不是“手写”,而是“导出 → 转换 → 微调”

手动写复杂 pathData 效率低、易出错,尤其含曲线或文字转矢量的场景。真实开发中,95% 以上的图标应走自动化流程。

使用场景与注意事项:

  • figma/Sketch 导出 SVG → android studio 中右键 resNew → Vector Asset → Local file:这是最稳路径,AS 会自动清理冗余指令、归一化坐标
  • 如果 SVG 含渐变、滤镜、text 元素,AS 会报错或静默丢弃——导出前务必在设计工具里“轮廓化文字”、“扁平化效果”
  • 导入后检查 android:viewportWidthandroid:viewportHeight 是否匹配原始画布尺寸,否则图形会被拉伸或裁切

真正难的不是语法本身,而是 viewport 缩放逻辑和多分辨率下视觉一致性。写错一个 L 顶多图形错位,但 viewport 设错,整个图标在不同屏幕密度上会糊、偏、缩成一团。

text=ZqhQzanResources