01 功能说明
了解 SVG 描边绘制、路径运动、形状变形和分组变换，并检查嵌入方式、最终状态及减少动态效果的适配。
svg-animations 是手工编写矢量动效的实用参考。它介绍 SVG 坐标系、形状、路径、分组、蒙版和滤镜，再将它们与 CSS 或 SMIL 动画结合。常见产物包括线条绘制、沿路径移动的对象、变换图标和动态插画。
源文档说明了影响正确性的机制：描边绘制依赖路径长度，变形需要兼容的路径命令结构，分组变换可以将整体运动与局部细节分开。它还要求提供无障碍标签及减少动态效果的行为，这些都需要在实际嵌入方式和动画模式下验证。
预期交付物
定义 viewBox，使用基本图形、路径和分组构建画稿。将可复用的蒙版、渐变和滤镜放在定义区域。
为描边绘制、路径跟随或变形选用所需属性与时间模型。测量长度并对齐路径命令，不凭感觉猜测。
在实际页面或图像嵌入方式中检查变换、最终状态和循环接缝。测试所选机制下的标签和减少动态效果的行为。
02 适用场景
提供 SVG 或图形需求，说明触发方式、最终状态和嵌入目标。内联标记与图像嵌入需分别检查交互、标签和减少动态效果的行为。
03 关键决策
可以直接修改路径与分组，而不必替换已渲染的视频片段。
使用实际路径长度，避免描边不完整或过早显现。
分组层级的运动可以与局部变化共存，同时保留预期的变换原点。
04 示例任务
以下示例任务说明尚未经过测试。使用前请检查该技能的设置。
提供 SVG，或描述需要创建的路径与形状。
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求；这不是安装命令。
运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。
使用 svg-animations 为我的结账页面创建一个小型成功提示插画。先绘制圆形轮廓，再呈现对勾，并保持完成状态。将画稿保留为可编辑 SVG，测量实际路径长度。提供带描述性标题的内联嵌入版本，以及减少动态效果时使用的静态版本。在目标浏览器中测试变换原点和最终描边完成情况，不要假定所有动画功能表现相同。加入用于检查的重播触发器，但不要把成功提示做成持续吸引注意力的无限循环。根据以下可观察标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
64e285d5a4a5创建可编辑的 SVG 路径、图标与插画动画。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md