svg-animations

该技能面向 SVG 路径动画、形状变形与矢量图形特效，适合动画 SVG 图标或插画、路径绘制（描边）动画、形状变形过渡、动态 Logo/图标、线条艺术动画及数据可视化动画。触发场景包括文件模式 /.svg、含 SVG 元素的 **/.tsx、/icons/*.tsx 动画图标，以及含 pathLength、stroke-dasharray 的文件。主要技术：Framer Motion 的 pathLength 实现路径绘制；CSS 用 stroke-dasharray 与 stroke-dashoffset 配合 @keyframes draw；通过 getTotalLength() 获取实际路径长度。还涵盖描边勾选图标、汉堡菜单转 X、加载旋转器、形状变形（Framer Motion 的 d 属性动画与 GSAP MorphSVGPlugin）、动态 Logo（交错子元素与描边后填充）、动态柱状图与圆形进度条。性能建议：用 will-change: transform 启用 GPU 加速、简化复杂路径、用 pathLength、避免对复杂形状动画 fill/stroke 而改用 opacity、用 <g> 分组批量变换。相关技能：framer-motion、motion-designer、gsap。作者为 Brookside BI，属 React Animation Studio 的一部分。限制与安装方式等更多信息暂未提供。