CSS transition 无法直接对 fill 属性中引用的 进行插值动画，因为 url(#id) 是不可计算的字符串值；真正需动画的是 元素的 offset 属性，必须通过 SVG 原生 SMIL 动画实现平滑过渡。
svg线性渐变填充进度条的平滑过渡实现教程：css `transition` 无法直接对 `fill` 属性中引用的 `
在构建 SVG Stepper（步骤指示器）时，开发者常尝试通过切换 fill="url(#lg-step-N)" 并配合 CSS transition: fill 实现颜色/长度变化的动效。但该方案必然失效——CSS 过渡仅支持可插值的数值型属性（如 opacity、transform、stroke-width），而 fill 的 url() 值属于不可计算的标识符引用，浏览器无法在两个不同 linearGradient ID 之间生成中间状态。
✅ 正确解法：动画化 <stop></stop> 的 offset 属性offset 是 SVG 标准属性（非 presentation attribute），虽不支持 CSS 过渡，但完全兼容 SVG 内置的 SMIL 动画规范。通过 <animate></animate> 元素可精确控制渐变停止点的位移，实现丝滑的“填充增长”效果。
✅ 推荐实现结构（Blazor 友好，零 JS 依赖）
以下代码完全基于纯 SVG + SMIL，无需 JavaScript 即可驱动（Blazor 中仅需用 @bind 或 @onclick 切换 CSS 类或触发 beginElement()，但核心动画逻辑零 JS）：
<svg viewBox="0 0 620 50" width="300" height="20"
fill="url(#lg-step-0)" stroke="black" stroke-width="1">
<path d="m 71 29 h -60 c -14 0 -14 -19 0 -19 h 60 c 6 -10 19 -10 25 0 h 200 c 6 -10 19 -10 25 0 h 200 c 6 -10 19 -10 25 0 h 60 c 14 0 14 19 0 19 h -60 c -6 10 -19 10 -25 0 h -200 c -6 10 -19 10 -25 0 h -200 c -6 10 -19 10 -25 0" />
<linearGradient id="lg-step-0">
<!-- 主色渐变区：从 0% 开始，到 offset1 结束 -->
<stop offset="0%" stop-color="blue" />
<stop id="stop-main" offset="6%" stop-color="blue" stop-opacity="0.6">
<!-- Step 1 → 2 → 3 的 offset 动画链 -->
<animate id="anim-step1" attributeName="offset" from="0.06" to="0.14"
begin="indefinite" dur="1s" fill="freeze"
calcMode="spline" keySplines="0.42,0,0.58,1" />
<animate id="anim-step2" attributeName="offset" from="0.14" to="0.50"
begin="indefinite" dur="1s" fill="freeze"
calcMode="spline" keySplines="0.42,0,0.58,1" />
<animate id="anim-step3" attributeName="offset" from="0.50" to="0.87"
begin="indefinite" dur="1s" fill="freeze"
calcMode="spline" keySplines="0.42,0,0.58,1" />
</stop>
<!-- 透明过渡区：与主色区对齐，形成硬边渐变 -->
<stop id="stop-transparent" offset="6%" stop-color="transparent">
<animate attributeName="offset" from="0.06" to="0.14"
begin="indefinite" dur="1s" fill="freeze"
calcMode="spline" keySplines="0.42,0,0.58,1" />
<animate attributeName="offset" from="0.14" to="0.50"
begin="indefinite" dur="1s" fill="freeze"
calcMode="spline" keySplines="0.42,0,0.58,1" />
<animate attributeName="offset" from="0.50" to="0.87"
begin="indefinite" dur="1s" fill="freeze"
calcMode="spline" keySplines="0.42,0,0.58,1" />
</stop>
</linearGradient>
</svg>
<button onclick="triggerStep(1)">Next step</button>
<script>
let currentStep = 0;
function triggerStep(step) {
currentStep = Math.min(3, step);
// 触发对应动画（Blazor 中可用 ElementReference.InvokeVoidAsync 替代）
document.getElementById(`anim-step${step}`).beginElement();
}
</script>? 关键要点说明
-
begin="indefinite"：使动画可由脚本手动触发（beginElement()），避免自动播放； -
fill="freeze"：动画结束后保持最终offset值，确保状态持久； -
calcMode="spline"+keySplines：实现ease-in-out缓动效果（等效 CSScubic-bezier(0.42,0,0.58,1)）； -
双
<stop></stop>同步动画：主色区与透明区的offset必须严格同步变化，否则出现色带撕裂； -
Blazor 集成建议：
在.razor文件中，使用@ref获取<animate></animate>元素，通过JSRuntime调用beginElement()：<animate @ref="step1Anim" ... /> @code { private ElementReference step1Anim; } // C# 中：await JS.InvokeVoidAsync("triggerAnimation", step1Anim);
⚠️ 注意事项
- SMIL 动画在现代 Chromium/Firefox/Edge 中完全支持，但已从 Safari 17+ 移除（WebKit 已弃用）。如需 Safari 兼容，请改用 CSS 自定义属性 +
@property（需渐进增强）或 Canvas 渲染； - 不要为每个步骤重复定义
<lineargradient></lineargradient>—— 单组<stop></stop>+ 多个<animate></animate>更轻量、更易维护； -
offset值推荐使用小数（如0.14）而非百分比字符串（"14%"），避免解析歧义。
通过 SMIL 精准控制渐变节点，你将获得真正流畅、高性能、且与 Blazor 渲染模型天然契合的 SVG Stepper 动效——告别无效的 fill 过渡，拥抱 SVG 原生动画能力。
