高级 UI 成长之路 (七) SVG 基础使用 + 绘制中国地图

它定义的图像如下所示:

上面水滴形状就是呈现出来的对应的图像，在这段代码中，首先使用 vector 标签来指定这是一幅 SVG 图像，而它有下面几个属性。

• width/height : 表示该 SVG 宽高
• viewportHeight/viewportWidth: 表示 SVG 图形划分的比例

path 标签

常用属性

标签名称	说明
android:name	声明一个标记，类似于 ID ，便于对其做动画的时候顺利地找到该节点
android:pathData	对 SVG 矢量图的描述
android:strokeWidth	画笔的宽度
android:fillColor	填充颜色
android:fillAlpha	填充颜色的透明度
android:strokeColor	描边颜色
android:strokeWidth	描边宽度
android:strokeAlpha	描边透明度
android:strokeLineJoin	用于指定折线拐角形状，取值有 miter (结合处为锐角)、round(结合处为圆弧)、bevel(结合处为直线)
android:strokeLineCap	画出线条的终点的形状（线帽），取值有 butt(无限帽) 、round (圆形线帽)、square(方形线帽)
android:strokeMiterLimit	设置斜角的上限

android:trimPathStart 属性

该属性用于指定路径从哪里开始，取值 0 ~ 1，表示路径开始位置的百分比。当取值为 0 时，表示从头部开始；当取值为 1 时，整条路径不可见。

android:trimPathEnd 属性

该属性用于指定路径的结束位置，取值为 0 ~ 1 ，表示路径结束位置的百分比。当取值为 1 时，路径正常结束；当取值为 0 时，表示从头开始位置就已经结束了，整条路径不可见。

android:trimPathOffset 属性

该属性用于指定结果路径的位移距离，取值为 0 ~ 1 。当取值为 0 时，不进行位移；当取值为 1 时，位移整条路径的长度。

android:pathData 属性

在 path 标签中，主要通过 pathData 属性来指定 SVG 图像的显示内容。而 pathData 属性初 M 和 L 指令以外，还有更多的指定。

指令	对应	说明
M	moveto(M x,y)	将画笔移动到指定的地方
L	lineto(L X,Y)	画直线到指定的坐标位置
H	Horizontal lineto(H X)	画水平线到指定的 X 坐标位置
V	Vertical lineto(V Y)	画垂直线到指定的 Y 坐标位置
C	curveto(C X1,Y1,X2,Y2,ENDX,ENDY)	三阶贝济埃曲线
S	Smooth curveto(S X2,Y2,ENDX,ENDY)	三阶贝济埃曲线
Q	Quadratic Belzier curve(Q X,Y,ENDX,EN