简单svg动画

一、将svg嵌入到html中

　　svg是指可伸缩矢量图形，它使用XML格式定义图像。在html中可以使用<svg>标签直接嵌入svg代码，例如：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
</svg>

 

svg标签中的属性：

• version：表示svg的版本，目前只能有1.0、1.1两种
• xmlns="http://www.w3.org/2000/svg"：固定值，表示命名空间
• xmlns:xlink="http://www.w3.org/1999/xlink"：固定值，表示命名空间
• xml:space="preserve"：保留所有的空格、TAB、回车键

 

二、svg中的形状

　　svg提供了一些预定义的形状，例如：矩形(rect)、圆形(circle)、椭圆(ellipse)、线(line)、折线(polyline)、多边形(polygon)、路径(path)等，你可以像下面这样绘制一个圆角矩形：

<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
    <rect x="10" y="10" rx="15" ry="15" width="80" height="80" style="fill:green;stroke:grey;stroke-width:3px"/>
</svg>

 

效果如下：

 

三、svg图形的样式

　　在svg中，可以使用被提供的属性来定义样式，也可以使用css定义样式，不过建议使用后一种。

<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
    <rect x="10" y="10" rx="15" ry="15" width="80" height="80" fill="green" stroke="grey" stroke-width="3px" />
</svg>

 

　　以上代码的效果跟前面的相同。

svg图形可使用的css样式包括以下几种：

CSS属性	描述
fill	设置图形的填充颜色
fill-opacity	设置图形填充颜色的透明度
fill-rule	设置图形的填充规则
marker	设置这个图形上沿直线（边）使用的marker
marker-start	设置这个图形上沿直线（边）使用的开始marker
marker-mid	设置这个图形上沿直线（边）使用的中间marker
marker-end	设置这个图形上沿直线（边）使用的结束marker
stroke	设置图形的描边颜色
stroke-dasharray	设置使用虚线来对图形进行描边
stroke-dashoffset	设置图形描边虚线的偏移值
stroke-linecap	设置描边线条线头的类型。可选择有round, butt 和 square
stroke-miterlimit	设置描边的斜接限制
stroke-opacity	设置描边的透明度
stroke-width	设置描边的宽度
text-rendering	设置描边的text-rendering属性

 

四、svg线条动画

1、stroke-dasharray属性：使用虚线来对图形描边。如果只有一个参数"a"，则先画"a"px的实线，再画"a"px的虚线；如果有两个参数"a,b"，第一个参数"a"代表实线的长度，第二参数"b"代表虚线的长度；如果有三个参数"a,b,c"，这种情况下，数字会循环两次，首先画"a"px实线，"b"px虚线，"c"px实线，然后画"a"px虚线，"b"px实线，"c"px虚线。

<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
   <line x1="20" y1="30" x2="165" y2="30" style="stroke:red;stroke-width:3px;stroke-dasharray:5" />
   <line x1="20" y1="60" x2="165" y2="60" style="stroke:green;stroke-width:3px;stroke-dasharray:10,5" />
   <line x1="20" y1="90" x2="165" y2="90" style="stroke:blue;stroke-width:3px;stroke-dasharray:5,10,5" />
</svg>

 

　　效果如下：

 

 

2、stroke-dashoffset属性：设置描边虚线的偏移值。

<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
   <line x1="20" y1="30" x2="165" y2="30" style="stroke:red;stroke-width:3px;stroke-dasharray:15,5;stroke-dashoffset:0" />
   <line x1="20" y1="60" x2="165" y2="60" style="stroke:red;stroke-width:3px;stroke-dasharray:15,5;stroke-dashoffset:5" />
   <line x1="20" y1="90" x2="165" y2="90" style="stroke:red;stroke-width:3px;stroke-dasharray:15,5;stroke-dashoffset:10" />
</svg>

 

　　效果如下：

 

当实线和虚线的长度足够大时，配合stroke-dasharray和stroke-dashoffset属性可以画出长短不一的实线：

最后，stroke-dasharray和stroke-dashoffset属性同时也是css样式，可以用css animation动画控制stroke-dashoffset属性的值，动态改变线条的长度。

示例：

 

另外，你也可以使用svg的path路径创建复杂图案，实现更酷炫的动画；