近日有统计机构在北京公布:2016届中国大学毕业生在毕业半年后的就业率为91.6%,这些毕业生平均月收入达到3988元。本科专业中,列在“高薪榜”前五位的专业分别是信息安全(5906元),软件工程(5869元),网络工程(5600元),微电子学(5503元)和计算机科学与技术(5452元)。
本篇来自 Nemo 的投稿,详细地介绍了SVG的属性以及使用方式,感兴趣的朋友可以自己试一试。另外点击最后 阅读原文 可查看一些SVG相关资料的链接。
Nemo 的博客地址:
http://blog.csdn.net/nemo__
SVG 即 可缩放矢量图形 (Scalable Vector Graphics),是使用XML来描述二维图形和绘图程序的语言,其定义遵循W3C标准。
在2003年1月,SVG 1.1被确立为W3C标准。使用 SVG 的优势在于:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
下面的例子是一个简单的SVG文件的例子。SVG文件必须使用.svg后缀来保存:
SVG 文件可通过以下标签嵌入 HTML 文档: 、 或者 。 使用 标签 标签被所有主流的浏览器支持,并允许使用脚本。当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 。任何 HTML 规范中都没有 标签。 使用 标签 标签是HTML 4的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。假如您安装了最新版本的Adobe SVG Viewer,那么当使用 标签时SVG文件无法工作(至少不能在 IE 中工作)! 使用 SVG SVG的 元素用于定义一些复杂的图形,其定义在 W3 SVG Path https://www.w3.org/TR/SVG11/paths.html#PathData 可用的命令如下: 以上所有命令均允许小写字母。 大写的字母 是基于原点的坐标系(偏移量),即绝对位置; 小写字母 是基于当前点坐标系(偏移量),即相对位置。 所有绘制工作都是在 元素中通过 d属性 来完成的。 (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,这里大小写没有区别) 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属性 的范例 stroke.avg,可以较好地理解各项含义: 标签A指令 标签 d属性 中,A指令 可用于画一段椭圆孤。 A指令格式 elliptical Arc (A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y) RX,RY 所在椭圆水平方向上的半径,垂直方向上的半径;RX 和 RY 设置为相同的值,将得到一个圆形的弧线 XROTATION 椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。 large-arc-flag,1表示大角度弧线,0为小角度弧线。 sweep-flag ,确定从起点至终点的方向,1为顺时针,0为逆时针 X,Y 为终点坐标 A指令图形详解,可以把arc.svg保存到本地,在浏览器中查看: 效果如下: 标签画贝塞尔曲线 标签d属性中,绘制贝塞尔曲线的命令包括: Q 二次贝赛尔曲线 x1,y1 x,y T 平滑二次贝塞尔曲线 x,y C 曲线(curveto) x1,y1 x2,y2 x,y S 平滑曲线 x2,y2 x,y (1) Q 二次贝塞尔曲线 Q指令格式:M x0,y0 Q x1,y1 x2,y2 通过M定义(x0,y0)为起点,用Q定义(x1,y1)为控制点,(x2,y2)为终点,构成一条二次贝塞尔曲线。 Q方法非常简单直观。 效果如下: (2) T 二次贝塞尔曲线平滑延伸 T指令格式:M x0,y0 Q x1,y1 x2,y2 T x4,y4 T命令是二次被赛尔曲线的平滑延伸命令,用Q定义了一段二次贝塞尔曲线后面,紧接着一个T命令,只需定义终点,就可以自动延伸出一条平滑的曲线。在这段曲线中,(x3,y3)没有手工定义,这里使用的T方法,只定义一个终点,起点是上一段曲线的终点,控制点则是上一段曲线的控制点的对称点(相对于上一段曲线的终点)。 T命令前面必须是一个Q命令,或者是另一个T命令,才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。 (3) C 三次贝塞尔曲线 C指令格式:M x0,y0 C x1,y1 x2,y2 x3,y3 C方法定义的是三次贝塞尔曲线,只是多了一个控制点。 (4) S 三次贝塞尔曲线平滑延伸 S指令格式:M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6 三次贝塞尔也有一个平滑延伸的命令,需要定义一个控制点和一个终点,命令会再自动生成一个控制点x4,y4,从而形成一条延伸出来的三次贝赛尔曲线。 S命令前面必须是一个C命令,或者是另一个S命令,才能达到这种效果。如果单独使用S命令,则会变成画二次贝塞尔曲线效果。 Android SVG动画 AnimatedVectorDrawable类 使用 ObjectAnimator 和 AnimatorSet 来促使 VectorDrawable 属性渐变,来生成动画效果。 通常可以在3个XML文件中定义添加动画的矢量图片: 在res/drawable/中拥有元素的矢量图片; 在res/drawable/中拥有元素且已添加动画的矢量图片; 在res/anim/中拥有元素的一个或多个对象动画; 添加动画的矢量图片可为 以及 元素的属性添加动画。 元素定义路径集或子组,而 元素则定义将绘制的路径。 完成一个 AnimatedVectorDrawable 通常需要定义三种不同类型文件: (1). android.graphics.drawable.VectorDrawable 对应的XML文件,它以 为根。我们可能让 path 或 group 的属性进行动画,因此需要对进行动画的 path 或 group 命名。 (2). android.graphics.drawable.AnimatedVectorDrawable 对应的XML文件,它以 为根。这里定义需动画的 path 或 group 的 , 的animation属性指定为一般的 ObjectAnimator 或 AnimatorSet 对应的XML。 (3). android.graphics.drawable.Animator对应的XML文件,它以 , 等为根,对应 AnimatorSet 和 ObjectAnimator。 VectorDrawable VectorDrawable一般是以 为根标签定义的XML文件, 、 、 、 元素都有各自可以播放动画的属性,查阅 SDK/docs/reference/android/graphics/drawable/VectorDrawable.html 你会找到每种元素到底有那些属性,以便针对这些属性播放特定的动画。比如 trimPathStart 和 trimPathEnd 能够让已画的path以百分比的形式渐变出现。 定义这个矢量图 android:name 矢量图的名字 android:width 矢量图的内部(intrinsic)宽度,支持所有Android系统支持的尺寸,通常使用dp android:height 矢量图的内部(intrinsic)高度 android:viewportWidth 矢量图视图的宽度,视图就是矢量图path路径数据所绘制的虚拟画布 android:viewportHeight 矢量图视图的高度 android:tint 矢量图的tint颜色。默认是没有tint颜色的 android:tintMode 矢量图tint颜色的Porter-Duff混合模式,默认值为src_in。(src_in,src_over,src_atop,add,screen,multiply) android:autoMirrored 设置当系统为RTL(right-to-left)布局的时候,是否自动镜像该图片。比如阿拉伯语。 android:alpha 该图片的透明度属性 设置路径做动画的关键属性的 android:name 定义group的名字 android:rotation 定义该group的路径旋转多少度 android:pivotX 定义缩放和旋转该group时候的X参考点。该值相对于vector的viewport值来指定的。 android:pivotY 定义缩放和旋转该 group 时候的Y参考点。该值相对于vector的viewport值来指定的。
使用 标签
标签被所有主流的浏览器支持,并允许使用脚本。当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 。任何 HTML 规范中都没有 标签。
标签是HTML 4的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。假如您安装了最新版本的Adobe SVG Viewer,那么当使用 标签时SVG文件无法工作(至少不能在 IE 中工作)!
使用
SVG的 元素用于定义一些复杂的图形,其定义在
W3 SVG Path https://www.w3.org/TR/SVG11/paths.html#PathData
W3 SVG Path
https://www.w3.org/TR/SVG11/paths.html#PathData
可用的命令如下:
以上所有命令均允许小写字母。 大写的字母 是基于原点的坐标系(偏移量),即绝对位置; 小写字母 是基于当前点坐标系(偏移量),即相对位置。
所有绘制工作都是在 元素中通过 d属性 来完成的。
(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,这里大小写没有区别)
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属性 的范例 stroke.avg,可以较好地理解各项含义:
标签 d属性 中,A指令 可用于画一段椭圆孤。
A指令格式
elliptical Arc (A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y)
RX,RY 所在椭圆水平方向上的半径,垂直方向上的半径;RX 和 RY 设置为相同的值,将得到一个圆形的弧线
XROTATION 椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
large-arc-flag,1表示大角度弧线,0为小角度弧线。
sweep-flag ,确定从起点至终点的方向,1为顺时针,0为逆时针
X,Y 为终点坐标
A指令图形详解,可以把arc.svg保存到本地,在浏览器中查看:
效果如下:
标签d属性中,绘制贝塞尔曲线的命令包括:
Q 二次贝赛尔曲线 x1,y1 x,y
T 平滑二次贝塞尔曲线 x,y
C 曲线(curveto) x1,y1 x2,y2 x,y
S 平滑曲线 x2,y2 x,y
Q指令格式:M x0,y0 Q x1,y1 x2,y2
通过M定义(x0,y0)为起点,用Q定义(x1,y1)为控制点,(x2,y2)为终点,构成一条二次贝塞尔曲线。 Q方法非常简单直观。
T指令格式:M x0,y0 Q x1,y1 x2,y2 T x4,y4
T命令是二次被赛尔曲线的平滑延伸命令,用Q定义了一段二次贝塞尔曲线后面,紧接着一个T命令,只需定义终点,就可以自动延伸出一条平滑的曲线。在这段曲线中,(x3,y3)没有手工定义,这里使用的T方法,只定义一个终点,起点是上一段曲线的终点,控制点则是上一段曲线的控制点的对称点(相对于上一段曲线的终点)。
T命令前面必须是一个Q命令,或者是另一个T命令,才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。
C指令格式:M x0,y0 C x1,y1 x2,y2 x3,y3
C方法定义的是三次贝塞尔曲线,只是多了一个控制点。
S指令格式:M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6
三次贝塞尔也有一个平滑延伸的命令,需要定义一个控制点和一个终点,命令会再自动生成一个控制点x4,y4,从而形成一条延伸出来的三次贝赛尔曲线。
S命令前面必须是一个C命令,或者是另一个S命令,才能达到这种效果。如果单独使用S命令,则会变成画二次贝塞尔曲线效果。
AnimatedVectorDrawable类 使用 ObjectAnimator 和 AnimatorSet 来促使 VectorDrawable 属性渐变,来生成动画效果。
通常可以在3个XML文件中定义添加动画的矢量图片:
在res/drawable/中拥有元素的矢量图片;
在res/drawable/中拥有元素且已添加动画的矢量图片;
在res/anim/中拥有元素的一个或多个对象动画;
添加动画的矢量图片可为 以及 元素的属性添加动画。 元素定义路径集或子组,而 元素则定义将绘制的路径。
完成一个 AnimatedVectorDrawable 通常需要定义三种不同类型文件:
(1). android.graphics.drawable.VectorDrawable 对应的XML文件,它以 为根。我们可能让 path 或 group 的属性进行动画,因此需要对进行动画的 path 或 group 命名。
(2). android.graphics.drawable.AnimatedVectorDrawable 对应的XML文件,它以 为根。这里定义需动画的 path 或 group 的 , 的animation属性指定为一般的 ObjectAnimator 或 AnimatorSet 对应的XML。
(3). android.graphics.drawable.Animator对应的XML文件,它以 , 等为根,对应 AnimatorSet 和 ObjectAnimator。
VectorDrawable一般是以 为根标签定义的XML文件, 、 、 、 元素都有各自可以播放动画的属性,查阅 SDK/docs/reference/android/graphics/drawable/VectorDrawable.html 你会找到每种元素到底有那些属性,以便针对这些属性播放特定的动画。比如 trimPathStart 和 trimPathEnd 能够让已画的path以百分比的形式渐变出现。
定义这个矢量图
android:name 矢量图的名字
android:width 矢量图的内部(intrinsic)宽度,支持所有Android系统支持的尺寸,通常使用dp
android:height 矢量图的内部(intrinsic)高度
android:viewportWidth 矢量图视图的宽度,视图就是矢量图path路径数据所绘制的虚拟画布
android:viewportHeight 矢量图视图的高度
android:tint 矢量图的tint颜色。默认是没有tint颜色的
android:tintMode 矢量图tint颜色的Porter-Duff混合模式,默认值为src_in。(src_in,src_over,src_atop,add,screen,multiply)
android:autoMirrored 设置当系统为RTL(right-to-left)布局的时候,是否自动镜像该图片。比如阿拉伯语。
android:alpha 该图片的透明度属性
设置路径做动画的关键属性的
android:name 定义group的名字
android:rotation 定义该group的路径旋转多少度
android:pivotX 定义缩放和旋转该group时候的X参考点。该值相对于vector的viewport值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的Y参考点。该值相对于vector的viewport值来指定的。