曾几何时，SVG(Scalable Vector Graphics)矢量动画图被坊间称之为一种被浏览器咒骂的技术，只因为蹩脚的硬件反对(IE)，和没完没了的兼容性调优(Safari)。然而在2022年的明天，所有都不一样了，正所谓三十年河东，三十年河西，微软所研发的采纳Chromium内核作为IE替代者的Edge浏览器曾经无望超过Safari成为第二大桌面浏览…

最近在水果公众号上看到一段菊花绽开的动画，丝般光滑的感触，吹弹可破的花瓣，让我忍不住看了下到底，将所得整顿了下，作为小技巧分享给大家。 具体看下图，视频转换成GIF品质降落，有趣味能够去水果公号看。 水果绽开动画 瞄了下源代码，竟然是用SVG动画拼成的序列帧。序列帧是什么？水果前端为什么好好的GIF图不必，…

1.先在html中创建svg元素 {代码…} 2.在svg里面添加矩形元素rect {代码…} 3.添加css描边动画 {代码…} 4.创建一个文本文档 {代码…} 5.收尾工作 {代码…} 6.完整代码 {代码…} 7.动画效果

在 svg 中对图形（line、polyline、rect、circle、ellipse、polygon）、路径（path）、文本(text、textPath、tspan)的描边都需要用到stroke属性。

在转换 SVG 图像时，浏览器会试着在每一帧上进行渲染，以便使图像尽可能的清晰。 不幸的是，SVG渲染可能会很慢，特别是对于较大的图像。

摘要在这篇文章中你将了解Awwwards网是怎样实现动画的。 本文介绍了HTML5 SVG中的circle 元素，它的stroke属性，以及如何使用CSS变量以及用 Vanilla JavaScript 为它们设置动画。