是 svg 原生时间轴工具，通过声明式属性控制动画：begin 定义触发时机（如 click、延迟或 indefinite），dur 和 repeatcount/repeatdur 控制时长与重复，values/keytimes/calcmode 实现多段非线性插值，fill="freeze" 保持结束状态。

`` 标签是 SVG 原生的时间轴控制工具，它不依赖 JavaScript，靠声明式属性就能驱动属性随时间变化。关键在于理解它如何定义“起止”、“节奏”和“触发时机”，而不是写逻辑代码。

时间轴起点与播放时机

动画默认在 SVG 加载完成时自动开始。若需手动干预，用 begin 属性控制启动条件：

• begin="click"：点击目标元素时启动
• begin="button1.click"：绑定外部带 id="button1" 的按钮（需 SVG 支持跨元素事件引用）
• begin="5s"：延迟 5 秒后启动
• begin="indefinite"：暂停初始状态，后续通过 JS 调用 element.beginElement() 启动

持续时间与重复行为

dur 决定单次动画长度，单位支持 s 或 ms；repeatCount 控制循环次数：

• dur="1.5s" 表示 1.5 秒完成一次过渡
• repeatCount="3" 执行 3 次后停止
• repeatCount="indefinite" 无限循环
• 也可用 repeatDur="10s" 限定总播放时长（如 10 秒内反复执行）

关键帧与插值节奏

仅靠 from/to 是线性变化。要实现多段或非匀速效果，需组合 values、keyTimes 和 calcMode：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

• values="0; 90; 45; 0" 定义旋转角度的关键帧序列
• keyTimes="0; 0.4; 0.7; 1" 指定每个值对应的时间比例（总时长的百分比）
• calcMode="paced" 让角度变化更自然（避免忽快忽慢）
• calcMode="discrete" 实现跳变效果（如开关式显隐）

动画结束后的状态保持

fill 属性决定动画停住后是否保留最终效果：

• fill="freeze"：停在最后一帧，维持最终属性值
• fill="remove"：恢复动画前的原始状态

这对交互反馈很重要——比如按钮点击后颜色高亮，通常需要 fill="freeze" 配合 begin="click" 实现“按住即生效、松手不还原”的视觉确认。