SVG形变动画的两种实现方式
Feb 13, 2019
SVG
原文：
作者：
本文是对SVG图形变换的两种实现方法的探索和对比。
我们将使用下面两个图形，并实现它们之间的平滑转换。
图形的代码：
<svg id="cups" width="100" height="1......
原文：
作者：
大致思路是用SVG做背景，SVG text做裁切路径。使用SVG而不是用CSS裁剪图像，是因为要实现背景动画的话CSS就需要一个gif的动态图片。
首先需要创建一个由SVG图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置......
See the Pen by NINE () on .
图标是在阿里的iconfont里面随便翻的，下载的svg格式，描边动画需要有stroke
SVG的stroke属性
stroke 颜色
stroke-width 宽度
stroke-linecap 端点的表现
......
stroke属性
stroke 定义描边颜色
stroke="#0078ff"
strokeWidth 定义描边的宽度
strokeWidth="3"
创建虚线时候用到的属性：
strokeDasharray 创建虚线
// 假设一个‘空格’5像素，一个......
SVG
SVG（Scalable Vector Graphics）是一种矢量图格式
SVG可以用Illustrator生成
+ 文件体积小
+ 有矢量图的特征，放大缩小而不失真【视网膜屏显示效果好】
SVG样式
fill => background-color/color......