在Android的vector矢量图中，viewportWidth是一个关键属性，它定义了矢量图内部坐标系的宽度范围。所有在path中书写的坐标点，都是相对于这个视口宽度来进行定位的，而不是相对于最终显示在屏幕上的像素尺寸。
viewportWidth的基本含义
在vector标签中，通常可以看到如下结构：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#FF000000"
android:pathData="M12,2 L12,22" />
</vector>
上面的viewportWidth等于24，表示矢量图内部横坐标从0到24。pathData里的M12,2表示起点在视口水平中央、距离顶部2个单位的位置。
视口与路径坐标的映射关系
Android会将viewportWidth和viewportHeight定义的区域，等比缩放到android:width和android:height指定的尺寸上。假设width为24dp、viewportWidth为24，则内部1个单位等于1dp。
| 属性 | 作用 |
|---|---|
| viewportWidth | 定义矢量图内部横坐标最大值 |
| width | 定义矢量图在屏幕上渲染的宽度 |
| path坐标 | 基于viewport坐标系进行绘制 |
如果viewportWidth设置错误会怎样
若将viewportWidth写成48，但path仍使用0到24的坐标，那么图形只会占据左半部分，右侧空白。反之若viewportWidth过小，路径可能被裁切。
通过代码理解坐标缩放
我们可以用简单计算来模拟映射逻辑：
// 假设矢量图最终宽度为24dp，视口宽度为24 float viewportWidth = 24f; float renderWidth = 24f; float scale = renderWidth / viewportWidth; // 等于1 // path中点x=12，对应屏幕位置 float screenX = 12 * scale; // 结果为12dp
实际开发建议
- 从设计工具导出的vector，保持viewport与原始画板一致
- 调整图标大小只改android:width和height，不要随意改viewportWidth
- 检查path坐标是否超出viewport范围，避免裁剪
总结：viewportWidth是矢量图的坐标系宽度，路径坐标基于此书写，系统自动将其映射到实际显示尺寸，理解这一点有助于排查矢量图显示异常。
AndroidvectorviewportWidth修改时间：2026-07-27 12:06:23