CSS3动画已足够强大，不过还是有一些它做不到的地方。配合SVG，让Web动效有更多的可能性。这次要做的效果是一个loading动画（如图）：其中旋转通过CSS来完成，但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助SVG来实现。

img

Step1、声明SVG视口

1
 
<svg width="100" height=“100”></svg>

指定一个宽高都为100像素的区域，width=”100”和width=”100px”是等价的，当然也可以使用其他的合法单位，例如cm、mm、em等。
阅读器会设置一个默认的坐标系统，见图：左上角为原点，其中水平（x）坐标向右递增，垂直（y）坐标向下递增。

img

在没有指定的情况下，所有的的数值默认单位都是像素。

Step2、绘制购物袋

购物袋由两个部分组成，先画下面的主体：

1
 
<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />

任何形状都可以使用路径元素画出，描述轮廓的数据放在它的d属性中。
a.样式中的fill用来设置填充色。
b.路径数据由命令和坐标构成:

指令 说明
M 20 40 表示移动画笔到(20,40)
L 80 40 表示绘制一条线到(80, 40)
A 10 10 90 0 1 70 100 绘制一个椭圆弧