简单svg动画实现

简单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路径创建复杂图案，实现更酷炫的动画；