用途：该技能用于实现 SVG 动画，包括描边绘制、路径变形、沿路径运动，以及配套的 DrawSVGPlugin、MorphSVGPlugin、MotionPathPlugin 使用。安装方式为 npm install gsap，并通过 import 与 gsap.registerPlugin() 注册插件。
主要能力：DrawSVGPlugin 支持描边从 0% 到 100% 绘制、指定区间（如 '30% 70%'）、反向绘制、多路径 stagger、描边宽度动画，以及配合 ScrollTrigger 的滚动绘制；可用于 path、line、polyline、polygon、circle、rect 等元素。MorphSVGPlugin 支持形状间变形，可用 shapeIndex（数值或 'auto'）、type: 'rotational'、smooth 等选项控制匹配与过渡，并可用 MorphSVGPlugin.convertToPath() 将图元转为 path。MotionPathPlugin 支持沿路径移动元素，可设置 align、alignOrigin、autoRotate、start/end、offsetX/offsetY，路径可为选择器、路径字符串或坐标点数组。三者可组合成时间线序列，并与 ScrollTrigger 联动。
使用方式：通过 gsap.to() 传入 drawSVG、morphSVG、motionPath 等属性即可。例如 gsap.to('#path', { drawSVG: '0% 100%', duration: 2 })、gsap.to('#shape1', { morphSVG: '#shape2', duration: 1 })、gsap.to('#box', { motionPath: { path: '#path', autoRotate: true }, duration: 3 })。也可用 gsap.timeline() 串联绘制、变形与运动。
适用场景：图标与 Logo 描边动画、形状切换过渡、元素沿轨迹运动、轨道动画、滚动驱动的 SVG 效果。
限制与注意：DrawSVG 需要元素有 stroke，仅 fill 无效；morph 需注意 shapeIndex 是否正确、复杂形状可用 smooth；autoRotate 需正确设置 transformOrigin；路径点过多会影响性能，应简化路径；SVG 渲染在不同浏览器可能存在差异。原文未提供收费、价格与平台支持等信息。