项目中只是使用svg变换能做出的效果是有限的，项目中主要是svg的css的结合使用，css可以控制svg的属性，svg的属性可以使用css动画和过渡，这个两点是关键的。下面是三个例子希望能在实际项目过程中对你有所帮助。

数字动画

先上效果：

生成gif动图后有点卡顿，实际还是很流畅的。用这个效果做时间动画很酷。实现原理：
使用svg的transition变换，改变svg中path路径的d属性， 数字1-9的路径代码如下：

        'M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0',
        'M50,0 L50,15 L50,30 L50,45 L50,60 L50,75 L50,100',
        'M0,0 L50,0 L50,50 L25,50 L0,50 L0,100 L50,100',
        'M0,0 L50,0 L50,100 L0,100 L50,100 L50,50 L0,50',
        'M0,0 L0,50 L50,50 L50,0 L50,35 L50,70 L50,100',
        'M50,0 L0,0 L0,50 L25,50 L50,50 L50,100 L0,100',
        'M50,0 L0,0 L0,50 L0,100 L50,100, L50,50 L0,50',
        'M0,0 L50,0 L50,20 L50,40 L50,60 L50,80 L50,100',
        'M0,0 L50,0 L50,100 L0,100 L0,0 L0,50 L50,50',
        'M0,100 L50,100 L50,50 L50,0 L0,0 L0,50 L50,50'

可以看到路径代码是有规律的。每个数字路经中的L个数是相同的，这样才能保证translate属性可用，我在上一篇文章clip-path应用中对这个特点有过介绍。完整dom查看链接： svg数字变换例子

svg菱形背景动效

菱形背景特效是好多博客网站常见的特效，效果如下：

如果作为背景使用的话，需要把颜色值调的浅一点，不能影响前面的内容，实现思路是通过js生成点，使用svg的polygon生成三角形，然后对每个点增加移动动画，这个里面主要是操作svg的dom，查看链接：svg菱形背景

svg的伪3D效果

为什么是伪3D呢，因为svg本身是不支持3D的，我们其实做的是再二维平面上的视觉欺骗。例如下面的旋转效果：

原理是有两个地球如图： 一个在前，一个在后， 用两个地球再动画运行的过程中用一个地球覆盖另一个地球，这样就能实现伪3D效果，仔细看地球是不会自传的，用这个例子只是告诉大家一个思路，svg怎么去实现伪3D的效果。
这里面太阳用了，svg的滤镜，到后面的章节，我们会仔细讲解svg滤镜，大家现在能明白就行了。当然了svg地球的代码是从网上下载的。这个找到资源应该不难。做大屏的同学很多都会用到元素叠加达到视觉欺骗的效果。并不推荐使用svg做3D的效果，做3D最好还是使用three做，对于一些卡通类的，类似儿童动画片的效果可以考虑用svg实现。源码地址：伪3D旋转

总结

简单的通过svg的变化实现的特效是很少的，并且部分css都有，并且css的变换比svg的更强大，更能让前端开发接受。