css svg做动图,用svg动态绘制图形

以此前对svg的了解，就是通过rect／circle／line……等绘制规则图形，或者利用path路径来绘制更复杂的图形。但是这种绘制是，当我们写好svg的xml文件嵌入html代码，页面载入的时候，图形是已经绘制完成了的。

例：上面的代码在页面绘制了一个半径为40的圆

那么如何能够让svg的绘制是动态的呢？也就是我们如何能够让svg的绘制过程一点点的出现，而不是刷新页面图形就已经渲染出来。于是，翻开许久没看的svg文档查看，但是纵览文档几遍，还是没有发现svg存在这样的属性或者方法提供。于是查资料，最后发现svg有个比较重要的属性，名为stroke, 中文软件中称之为“描边”。如上图circle的

strock 属性-->描边颜色；

strock－width 属性-->描边宽度；

等等很多属性，不一一列举，因为今天我们要实现动态绘制的关键属性是:

stroke-dasharray-->表示虚线描边;

stroke-dashoffset-->表示虚线的起始偏移;

例：代码和效果如图所示

如图绘制了一个半径100的圆，然后通过stroke-dasharray属性让圆成为了50px一段的虚线，而stroke-dashoffset则表示虚线的便宜位置。由此我们就可以想象：当我们把stroke－dasharray设置到足够大，大到比我们绘制的圆的周长还大时，会发生什么呢？那其实绘制的还是一个完整的圆。由此，我们可以通过animation来动态的改变stroke－dashoffset的偏移位置时，这个圆不就动起来了么？that‘s it ！

html

css

如此，我们通过class将stroke跟css属性animation结合起来了，通过控制stroke-dashoffset的偏移位置的改变来实现动态的绘制图形的效果。事实上，这种手法实现了svg的动态绘制“效果”，但我们必须明白的是：这并不是表明svg是我们眼之所见绘制逐渐绘制出来的图形；而是，svg绘制方式本身没有改变，一如前文所言当页面加载的时候就已经完成了绘制，我们所见的动态绘制效果是通过图形虚线段和偏移来实现的svg图形的动画。上图css代码中，animation：dash 5s linear infinite; infinite会让stroke的偏移位置动画一直执行，视觉效果上也就是圆圈一直在被绘制。如果去掉infinite，动画会在第一次绘制之后停止，圆圈也会消失。圆圈消失是因为动画结束后stroke-dashoffset的值会回到1000，偏移位置大于circle的周长，所以circle看不见了，并不是circle不显示了，这点需要注意。

如果想要动画绘制完成之后保持绘制状态，很简单，只需要把animation中的infinite替换成forwards，这样当圆圈绘制完毕，动画会一直保持着绘制结束时的状态。于是，我们要的动态绘制效果便达成了！

例：动态绘制图形并保持结束状态

css svg做动图,用svg动态绘制图形相关推荐

css svg做动图,用SVG制作酷炫动态图标的方法
用SVG制作酷炫动态图标的方法发布时间:2020-09-14 14:56:39 来源:亿速云阅读:160 作者:小新用SVG制作酷炫动态图标的方法?这个问题可能是我们日常学习或工作经常见到的.希 ...
如何使用python做图_如何使用python做动图
python可以做动图吗 ImageMagick 是一套功能强大.稳定而且开源的工具集和开发包,可以用来读.写和处理超过200种基本格式的图片文件,包括PNG,JPEG,GIF,HEIC,TIFF,D ...
python怎么变成动图_python可以做动图吗
ImageMagick 是一套功能强大.稳定而且开源的工具集和开发包,可以用来读.写和处理超过200种基本格式的图片文件,包括PNG,JPEG,GIF,HEIC,TIFF,DPX,EXR,WebP,P ...
Matplotlib做动图(基础版)
今天来用Matplotlib做动图玩玩,怎么让静图变为动图呢?我们现在的看到的电影.电视剧一般是24帧的,也就是每秒24幅图.用Matplotlib做动图也是这个原理用一定数量的静图在一定的时间内播放 ...
R语言gganimate包创建可视化gif动图、可视化动图：创建动态散点图动画基于transition_time函数、使用shadow_wake函数配置动画的渐变效果（gradual falloff）
R语言gganimate包创建可视化gif动图.可视化动图:创建动态散点图动画基于transition_time函数.使用shadow_wake函数配置动画的渐变效果(gradual falloff) ...
GIPHY CAPTURE如何做动图？gif制作器的使用方法？
gif 动图制作哪个好?今天小编给大家推荐一款Mac上制作gif图的工具-- GIPHY CAPTURE.GIPHY CAPTURE是专为Mac用户准备的一款非常简单的GIF制作器,只需单击" ...
Python实践：画个动图玩玩，Python绘制GIF图总结
Python实践:画个动图玩玩,Python绘制GIF图总结文章目录 Python实践:画个动图玩玩,Python绘制GIF图总结具体实现 Python代码参考资料上期博客< Pytho ...
esri-leaflet入门教程（5）- 动态绘制图形
esri-leaflet入门教程(5)- 动态绘制图形 by 李远祥在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...
Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)
leaflet动态绘制图形动态绘点动态绘线动态绘多边形动态绘制矩形 2020.3.16更新更新日志: 2019.1.14:更新了绘制多边形时tmpline没有移除的问题 2019.1.15: ...

css svg做动图,用svg动态绘制图形

css svg做动图,用svg动态绘制图形相关推荐

最新文章

热门文章