svg动画编辑器，让你无需写代码，直接给 SVG 文件添加动画。以下是最快的上手方式：
上传 SVG 文件（拖拽、点击上传或粘贴代码）
在左侧图层面板点击任意元素选中它
在右侧动画面板选择动画类型（旋转/缩放/淡入…）
调整参数（时长、延迟、缓动），预览实时更新
点击「导出」下载含动画的 SVG 文件
✦ 动画类型
SVGlow 支持 12 种动画类型：
↻ 旋转 — 绕 X / Y / Z 轴旋转，可设置角度
⊹ 缩放 — 从 scaleFrom 缩放到 scaleTo
◑ 淡入淡出 — 控制透明度变化
↔ 位移 — 沿 X/Y 轴平移
⊸ 描边跑马灯 — stroke-dashoffset 滚动
● 闪烁 — 交替显示/隐藏
◐ 颜色过渡 — fill 或 stroke 颜色渐变
⧖ 斜切 — skewX/skewY 变形
⟿ 路径运动 — 沿 SVG path 轨迹移动
✍ 手绘描边 — stroke-dasharray 自描边效果
🌀 弹簧物理 — 基于 stiffness/damping/mass 的弹性动画
✎ 逐字显现 — 文字元素逐字符淡入
◑ 多层动画
单个元素可以叠加多个动画（如「旋转 + 淡入」「缩放 + 颜色变化」）：
选中元素后，右侧面板顶部显示动画层 Tab（[↻ 动画1] [+]）
点击 [+] 添加新动画层，每层独立配置参数
导出时自动合并为 animation: anim1, anim2; CSS
⏱ 时间轴
时间轴面板让你直观地调整所有元素的动画时序：
顶栏点击「⏱」按钮展开底部时间轴面板
每行代表一个有动画的元素，彩色色块 = delay + duration
拖拽色块左边缘 → 改变 delay（开始时间）
拖拽色块右边缘 → 改变 duration（持续时长）
点击行选中该元素，右侧面板联动更新
✦ 一键套餐
动画套餐让你一键为所有元素套用整套动画方案，无需逐个配置：
顶栏点击「✦」按钮打开套餐面板
选择一套方案：逐个淡入 / 全部弹跳 / 从左飞入 / 心跳律动 / 旋转渐隐
一键写入所有元素，自动递增 stagger 延迟
⬇ 导出方式
SVGlow 支持多种导出格式：
SVG — 含 <style> 动画的完整 SVG 文件，可直接嵌入网页
GIF — 点击「GIF」配置帧率/尺寸后生成（纯前端，gif.js）
🖼 APNG — 点击「🖼」导出 Animated PNG，比 GIF 支持透明通道，颜色更丰富，纯前端生成无需服务器
CSS — 点击「{ }」一键复制完整 CSS 动画代码
Lottie — 点击「🎬」下载 .lottie.json（支持 fade/rotate/scale/translate）
🎥 WebM 视频 — 点击「🎥」录制为 WebM 视频，可在浏览器/编辑器中直接播放
分享链接 — 点击「⤴」生成 7 天有效预览链接
✨ AI 功能
SVGlow 内置 AI 动画助手，让不懂动画的用户也能快速上手：
顶栏点击「✨」展开 AI 面板
「生成」标签：用自然语言描述效果（如「让太阳慢慢旋转，星星闪烁」）
「分析」标签：AI 自动识别 SVG 元素语义，建议动画类型，并重命名 path1/g2 等无意义 ID
预览 AI 建议后点击「应用」一键写入
在线网址：https://svglow.cn/
评论0+