Android vector path data怎么写？矢量图XML中的路径数据详解

Android矢量图通过XML文件定义，其中<path>标签的android:pathData属性是核心，它决定了矢量图的形状和轮廓，其语法和SVG的路径数据语法基本一致，掌握它的编写规则就能自定义各种矢量图形。

path data基本语法规则

path data由一系列指令和对应的参数组成，指令区分大小写，大写指令表示坐标是绝对坐标，小写指令表示坐标是相对坐标（相对于上一个点的坐标偏移量）。多个指令之间可以没有分隔符，参数之间可以用空格、逗号分隔。

常用指令说明

常见图形path data编写实例

绘制一条直线

从坐标(10,10)到(50,10)绘制一条水平直线，绝对坐标写法如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:pathData="M10,10 L50,10"
        android:strokeWidth="2"
        android:strokeColor="#FF0000"/>
</vector>

如果用相对坐标写法，等价于M10,10 l40,0，因为从(10,10)到(50,10)的x偏移是40，y偏移是0。

绘制一个矩形

绘制左上角在(5,5)，宽20高10的矩形，代码如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:pathData="M5,5 H25 V15 H5 Z"
        android:strokeWidth="2"
        android:strokeColor="#00FF00"
        android:fillColor="#00FF00"/>
</vector>

这里的路径逻辑是：移动到(5,5)，水平画到(25,5)，垂直画到(25,15)，水平画到(5,15)，最后闭合路径回到起点(5,5)。

绘制一个圆形

矢量图中没有直接的画圆指令，通常用三次贝塞尔曲线近似实现，绘制圆心在(12,12)，半径10的圆形：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:pathData="M12,2 C17.52,2 22,6.48 22,12 C22,17.52 17.52,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 Z"
        android:strokeWidth="2"
        android:strokeColor="#0000FF"
        android:fillColor="#0000FF"/>
</vector>

这里通过四个三次贝塞尔曲线段拼接成近似圆形，控制点的计算基于圆的贝塞尔近似公式，k值取0.5522847498，比如从顶部中点(12,2)到右侧中点(22,12)的曲线，控制点是(12+10*k,2)和(22,12-10*k)。

编写path data的注意事项

• 指令大小写要区分，绝对坐标和相对坐标不要混用导致图形位置错误
• 参数数量要和指令匹配，比如C指令需要6个参数，少传参数会导致XML解析错误
• 如果路径比较复杂，可以先使用SVG编辑工具绘制图形，导出SVG后提取path的d属性内容，再放到android:pathData中，注意替换其中的特殊字符符合XML转义规则
• viewportWidth和viewportHeight要和路径坐标的范围匹配，否则图形可能显示不全

注意：Android的vector path data不支持SVG的A（椭圆弧）指令，如果需要绘制弧线，需要使用贝塞尔曲线模拟，或者使用<arc>标签配合其他属性实现。

Androidvector_path_data矢量图XMLSVG_path修改时间：2026-07-15 15:45:33