通过Framer-motion来实现SVG元素的动画效果，也是非常方便的，整体上和我们实现一般DOM元素没有什么区别，我们只要把svg相关的原名名称前面也加上motion.的前缀，然后按照motion组件的动画实现方式，就可以轻松实现各种变化效果了：
<motion.svg width="1000" height="800" viewBox="0 0 300 100" style={{
border:'white solid 1px'
}} xmlns="http://www.w3.org/2000/svg">
<motion.radialGradient cx="25%" id="myGradient">
<motion.stop offset="0" stopColor="white" />
{
}
<motion.stop offset="50%" stopColor="black" animate={{
transition:{
duration:2
},
offset:'100%'
}}/>
</motion.radialGradient>
{
}
<motion.rect width="20" height="80" x="100" fill="#008d46" animate={{
width:100,
fill:'#ff0000',
transition:{
duration:2
}
}}/>
<circle cx="50" cy="50" r="45"/>
<ellipse cx="150" cy="50" rx="45" ry="25" />
<rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</motion.svg>
基本上，SVG元素相关的绝大部分属性都能产生变化，你可以根据你自己的需要进行尝试。但是有一个非常要注意的点，❗️❗️就是在有一些svg元素的属性上有一个自己的x和y的值，这两个属性是用来让设置元素的坐标的，那我们在设置动画信息对象的时候要注意了，如果你对象里面是设置x，y那么就是产生位移作用的值（相当于是transform中translate），那么如果你想设置svg元素中的x和y，也就是前面说过的关于坐标的两个属性，你需要设置在动画对象中设置成attrX和attrY。
<motion.svg
x={0}
animate={{
x:100,
attrX:0
}}
>
</motion.svg>
circle，ellipse, line, path, polygon, polyline 和rect这几种svg元素，如果你使用motion组件，那么可以使用三个特别的属性 - pathLength，pathSpacing和pathOffset。
记住，这三个属性，需要再动画信息对象中使用，而不是直接设置在元素上，比如pathLength可以让我们轻松实现路径生长动画。
<motion.svg
width="200"
height="200"
viewBox="0 0 400 400"
initial="hidden"
animate="visible"
>
<motion.circle
cx="100"
cy="100"
r="80"
strokeWidth="10"
stroke="#ffffff"
fill='none'
initial={{
pathLength:0
}}
animate={{
pathLength:1,
transition:{
duration:2
}
}}
/>
</motion.svg>
三个属性属性的值范围都是0-1，单独使用pathLength是可以的，但是如果要让pathSpacing和pathOffset有效果，一般都要搭配上pathLength，让pathLength的值小一点，比如0.5。
pathSpacing就类似css中的stroke-dasharray属性的第二个参数作用，表示分段之间的空的距离，而pathOffset则是类似css中的stroke-dashoffset的作用，表示线段的偏移量。