【Android graphics】(一) Android SVG使用之AnimatedVectorDrawable

本篇文章已授权微信公众号guolin_blog（郭霖）独家发布
注：转载请注明来自Nemo, http://blog.csdn.net/nemo__
 
 

一、概述

       SVG即可缩放矢量图形(Scalable Vector Graphics)，是使用XML来描述二维图形和绘图程序的语言，其定义遵循W3C标准。

关于SVG主要内容有：
- SVG W3C标准
- W3School SVG
- MDN SVG Attribute reference
- SVG参考手册(SVG元素)
- SVG实例
- SVG属性
- Adobe SVG查看器

       在2003年1月，SVG 1.1被确立为W3C标准。使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改(比如记事本)
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

 
       下面的例子是一个简单的SVG文件的例子。SVG文件必须使用.svg后缀来保存：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

 

二、HTML页面中的SVG

       SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

1. 使用<embed>标签

       <embed>标签被所有主流的浏览器支持，并允许使用脚本。当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

1. 使用<object>标签

       <object>标签是HTML 4的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。假如您安装了最新版本的Adobe SVG Viewer，那么当使用<object>标签时SVG文件无法工作（至少不能在 IE 中工作）！

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

1. 使用<iframe>标签

       <iframe>标签可工作在大部分的浏览器中。

<iframe src="rect.svg" width="300" height="100">
</iframe>

 

三、SVG <path>

       SVG的<path>元素用于定义一些复杂的图形，其定义在W3 SVG Path。

<path>可用的命令如下：

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,ENDY)：                          二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：                     同样二次贝塞尔曲线，更平滑
A = elliptical Arc(A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y)：   弧线
Z = closepath()：                                                       关闭路径

       以上所有命令均允许小写字母。大写的字母是基于原点的坐标系(偏移量)，即绝对位置；小写字母是基于当前点坐标系(偏移量)，即相对位置。

       所有绘制工作都是在<path>元素中通过d属性来完成的。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

(1) 坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下

(2) 命令与参数间的空格可以省略
M 250 150 M250 150

(3) 参数间可以使用空格或逗号隔开
M 250,150 M250,150

(4) 同一指令出现多次可以只用一个
M300,70 l 0,-70 70,70 0,0 -70,70z

(5) 命令大写字母基于坐标系原点，小写字母基于当前位置

       假如虚拟画笔开始绘制的位置是(50,50)，如果使用的是L100,100指令，那么就是从(50,50)位置开始绘制直线，绘制到(100,100)的位置。如果是l100,100指令，那么直线将从(50,50)位置开始绘制，绘制到(50+100,50+100)的位置。

(6) 闭合路径是指从最后一个绘制点连线到开始点，这个命令是Z(或z，这里大小写没有区别)
 

1. SVG Stroke属性

SVG提供了一个范围广泛stroke 属性。在本章中，我们将看看下面：
- stroke 定义一条线，文本或元素轮廓颜色
- stroke-width 定义了一条线，文本或元素轮廓厚度
- stroke-linecap 定义不同类型的开放路径的终结，对接(butt)、圆形(round)和方形(square)；
- stroke-linejoin 控制两条线段之间的衔接，三个值：尖角(miter)、圆角(round)和斜角(bevel)；
- stroke-miterlimit miter-length和stroke-width之间的比率做了限制，它的比值范围应大于或等于1。当比值不在这个范围的时候， stroke 就会被转换成斜角（bevel）。当strokeLineJoin设置为“miter”的时候，绘制两条线段以锐角相交的时候，所得的斜面可能相当长。当斜面太长，就会变得不协调。strokeMiterLimit属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是10，意味着一个斜面的长度不应该超过线条宽度的10倍。如果斜面达到这个长度，它就变成斜角了。当strokeLineJoin为“round”或“bevel”的时候，这个属性无效。
- stroke-dasharray 创建虚线
- stroke-dashoffset 设置需要图案延迟绘制的距离
- stroke-opacity 线条，文本或元素轮廓透明度；

 
可能的取值如下：

stroke="blue"
stroke="#347559

stroke-width="3px"
stroke-width="1em"
stroke-width="2%"

stroke-dashoffset="3px"
stroke-dashoffset="1em"
stroke-dashoffset="2%"

 
以下为stroke属性的范例stroke.avg，可以较好地理解各项含义：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" stroke-width="10" stroke-linecap="butt" d="M50,50 L50,150" />
    <path stroke="green" stroke-width="20" stroke-linecap="round" d="M100,50 L100,150" />
    <path stroke="blue" stroke-width="30" stroke-linecap="square" d="M150,50 L150,150" />

    <path stroke="black" stroke-width="4" d="M50,50 L50,150" />
    <path stroke="black" stroke-width="4"