第29页
fill
填充动画。
填充的变化意味着路径的色彩可以发生连续变化。请在JZCreative公众号中回复“svg0106”查看案例，了解SVG和CSS的两种不同渐变实现策略。
visible
可见性动画。
点击消失
上述代码完成后，你可以在移动端点击进行测试。注意，visible的动画属于set范畴，所以动画部分开头的书写有一些不同。
translate
对于一些基本几何图形，位移只需要通过x和y解决。但是在很多大型商业级SVG项目中，复杂图像的路径根本不存在x和y参数，这时只有借助translate才能实现。我们先用一个基本的矩形路径练习。
注意在animate Transform中，Attribute Name都以transform为主，而translate是它的分项，可以通过type="translate"标注。随后对横纵坐标进行动画定义， translate就得以实现。绝大多数SVG交互设计都会用到位移动画，所以务必要完全掌握它的书写规范，而且它属于animate Transform类型，所以也要注意开头的书写内容。
scale
除了圆形可以用r实现缩放之外，同样,复杂图像的路径只能借助scale完成缩放。不过需要注意，SVG中图像的默认基准点并不是图像中心，而是SVG画布原点（左上角）。
对CSS来说，大多数情况下变形都是以图像中心点或指定中心点来进行变形的。然而SVG却始终强制以坐标轴原点为变形中心点。虽然通过旋转可以设置中心点，SVG2中也能用Transform-origin指定中心点，但是后者目前并不支持在微信图文中使用。
对CSS来说，坐标轴不会随着图像的变形而调整，SVG却会同步变形。那么，如何让图像保持CSS般基于中心点放大？就静态设计而言，SVG的标准文档建议我们结合translate，即刚才学会的位移来重新校正图像的中心点。
正由于坐标系会随着图像同步缩放，所以根据数学原理，我们只需要将图像当前中心点（即左上角的原点）translate到当前图像中心点，对图像进行缩放、将整个坐标系反向同数值移回原位。如果我们对矩形完成缩放动画，那么其书写内容如下。
rotate
和所有形变动画一样，旋转动画在不指定中心点的情况下，会直接以坐标系原点为圆心旋转，所以在旋转动画中，我们要书写如下内容。
在rotate的每个数值中，第一位代表角度，后两位代表中心点。
skew X&skew Y
倾斜动画统一以SVG坐标系原点为中心点。如果我们对一个矩形直接添加倾斜动画，那么书写方式如下。