原文：

作者：

本文是对SVG图形变换的两种实现方法的探索和对比。

我们将使用下面两个图形，并实现它们之间的平滑转换。

图形的代码：

<svg id="cups" width="100" height="130" viewBox="0 0 75 47" xmlns="......

原文：

作者：

大致思路是用SVG做背景，SVG text做裁切路径。使用SVG而不是用CSS裁剪图像，是因为要实现背景动画的话CSS就需要一个gif的动态图片。

首先需要创建一个由SVG图形组成的背景。这里使用椭圆形斑点的形状。需要注意的是将矢量图软件中的画板/画布大小设置成和最终效果里的viewBox相同的尺寸。（Inkscape中在文档属性下的缩放选项）

目标......

See the Pen by NINE () on .

图标是在阿里的iconfont里面随便翻的，下载的svg格式，描边动画需要有stroke

SVG的stroke属性

stroke 颜色

stroke-width 宽度

stroke-linecap 端点的表现

stroke-dasharray 虚线

描边动画重点在最后这个属性，SVG本身也可以用......

stroke属性

stroke 定义描边颜色

stroke="#0078ff"

strokeWidth 定义描边的宽度

strokeWidth="3"

创建虚线时候用到的属性：

strokeDasharray 创建虚线

// 假设一个‘空格’5像素，一个‘_’5像素

strokeDasharray="5"

// 看到的是 _ _ _ _ 即5像素......

SVG

SVG（Scalable Vector Graphics）是一种矢量图格式

SVG可以用Illustrator生成

+ 文件体积小

+ 有矢量图的特征，放大缩小而不失真【视网膜屏显示效果好】

SVG样式

fill => background-color/color

fill-opacity (0-1)

opacity

stroke => borde......