龙媒SEO专注高端网站建设,网站优化,营销型网站设计
微信:sh99002313  电话:189 6217 7230

苏州高端网站设计
Our toughts in one place

简单svg动画,新手教程

发布者:龙媒SEO 来源: 时间:2019-05-13 查看:653次

一、将svg嵌入到html中

  svg是指可伸缩矢量图形,它使用XML格式定义图像。在html中可以使用标签直接嵌入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图形的样式

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


    

 

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

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虚线。

复制代码


   
   
   

复制代码

 

  效果如下:

 

 

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

复制代码


   
   
   

复制代码

 

  效果如下:

 

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

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

示例:

 

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


标签: