现代浏览器已弃用SMIL动画，推荐用CSS transition、@keyframes和stroke-dasharray/dashoffset实现SVG流畅过渡，需内联SVG、统一颜色格式、避免内联style，并用JS获取路径长度。
SVG 本身不支持 <animate> 标签的现代浏览器原生流畅过渡——SMIL 动画（包括 <animate>、<set>、<animateTransform> 等）在 Chrome 100+、Firefox 110+ 和 Safari 16+ 中已被逐步弃用或完全移除。当前实现“流畅矢量图形过渡”的可靠路径，是放弃 SMIL，转向 CSS + 原生 SVG 属性控制。
✅ 用 CSS transition 实现基础颜色与状态过渡
适用于 hover、click、class 切换等交互场景，响应快、代码轻、性能好。
-
fill、stroke、opacity、transform（如scale、translate）等属性天然支持 CSS 过渡 - 颜色值必须格式统一：全用
#rrggbb、全用rgb()或全用hsl()，否则浏览器无法插值 - SVG 必须内联嵌入 HTML（即
<svg>...</svg>），不能用<img src="icon.svg">，否则无法用 CSS 选中内部元素 - 避免内联 style（如
style="fill:red"），它会覆盖外部 CSS 的 transition 规则
示例：
<svg width="100" height="100" viewBox="0 0 100 100">
<circle class="dot" cx="50" cy="50" r="20"/>
</svg>
<style>
.dot {
fill: #3498db;
transition: fill 0.35s cubic-bezier(0.33, 0.8, 0.5, 1),
transform 0.35s ease;
}
.dot:hover {
fill: #e74c3c;
transform: scale(1.2);
}
</style>✅ 用 CSS @keyframes 实现多段/循环/时序精确的过渡
适合 Logo 微动效、加载动画、状态高亮等需要节奏控制的场景。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
hsl()表示颜色：色相（hue）连续变化更自然，避免 RGB 跳变 - 可同时驱动多个属性（
fill+stroke-width+opacity） - 注意
forwards保留在结束帧，避免动画回退
示例（呼吸式色相过渡）：
@keyframes pulseHue {
0% { fill: hsl(210, 100%, 60%); }
50% { fill: hsl(30, 100%, 65%); }
100% { fill: hsl(210, 100%, 60%); }
}
.pulsing {
animation: pulseHue 2.4s ease-in-out infinite;
}✅ 用 stroke-dasharray + stroke-dashoffset 实现“路径绘制”过渡
这是 SVG 路径最经典、兼容性最强的“出现式”过渡，视觉上像笔在画线。
- 必须通过 JS 获取真实路径长度：
pathEl.getTotalLength() - 在 DOM 加载完成后再执行（防止返回 0）
- 设置
stroke和fill="none"，否则描边不可见或被填充遮挡 - CSS 动画只需控制
stroke-dashoffset，从全长减到 0
示例：
<svg viewBox="0 0 200 200">
<path class="line" d="M20,20 Q100,50 180,20"
stroke="#2ecc71" stroke-width="3" fill="none"/>
</svg>.line {
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
animation: draw 1.8s ease-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}document.addEventListener('DOMContentLoaded', () => {
const path = document.querySelector('.line');
const len = path.getTotalLength();
path.style.setProperty('--len', len);
});❌ 不推荐：SMIL <animate> 标签
- Chromium 已移除支持（自 v100），Firefox 限制严格，Safari 仅部分兼容
- 无法与 CSS 变量、现代事件系统良好协同
- 调试困难，且无 transition 缓动控制能力
即使写出来，也大概率在主流浏览器中静默失效。
不复杂但容易忽略
