CSS transition 无法直接对 fill="url(#id)" 进行动画，因为 URL 引用是非数值字符串；真正可动画的是 的 offset 属性，需通过 SVG SMIL 动画实现平滑过渡。
css `transition` 无法直接对 `fill="url(#id)"` 进行动画，因为 url 引用是非数值字符串；真正可动画的是 `
在构建 SVG 步进器（Stepper）时，常见的误区是试图通过切换 fill 属性引用不同的 <lineargradient></lineargradient> ID（如 url(#lg-step-0) → url(#lg-step-1)）并依赖 CSS transition: fill 实现视觉过渡。这是无效的：CSS 过渡仅支持可插值的数值型属性（如 opacity、transform、color），而 fill 的 url() 值属于不可计算的字符串引用，浏览器无法在两个 DOM 元素（不同 <lineargradient></lineargradient>）之间生成中间状态。
✅ 正确解法是：固定使用同一个 <lineargradient></lineargradient>，仅动态动画其内部 <stop></stop> 元素的 offset 属性。这正是 SVG 原生支持的 SMIL 动画能力——它可精确控制 offset（如从 6% → 14% → 50%），且支持缓动函数（calcMode="spline" + keySplines），实现专业级平滑效果。
以下为精简、可复用的实现方案（兼容 Blazor，无侵入式 JS）：
<svg viewBox="0 0 620 50" width="300" height="20"
fill="url(#lg-stepper)" 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-stepper">
<!-- 主色停止点：控制渐变结束位置 -->
<stop offset="6%" stop-color="blue" stop-opacity="0.6">
<!-- 三段式动画：step0→1→2→3 -->
<animate id="anim-stop1" 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-stop2" 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-stop3" 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 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()">Next step</button>
<script>
let step = 0;
const animIds = ['anim-stop1', 'anim-stop2', 'anim-stop3'];
function triggerStep() {
if (step < animIds.length) {
document.getElementById(animIds[step]).beginElement();
step++;
}
}
</script>? 关键注意事项：
- ✅ Blazor 友好：动画逻辑完全由 SVG 原生驱动，JS 仅作触发（
beginElement()），可轻松封装为@onclick="@TriggerStep"绑定； - ⚠️ 避免重复动画：每个
<animate></animate>的begin="indefinite"表示需手动触发，确保不会自动播放； - ? 现代兼容性：SMIL 在 Chrome/Firefox/Safari/Edge 中均受支持（IE 已淘汰，无需考虑）；
- ? 可逆扩展：如需“上一步”，可为每个动画添加反向
from/to并调用endElement()或使用restart="whenNotActive"； - ? 性能提示：相比反复操作 DOM 或 Canvas 渲染，SMIL 动画由浏览器渲染引擎原生优化，零 JS 计算开销。
通过将动画焦点从“切换渐变定义”转向“驱动渐变参数”，你获得了真正流畅、声明式、高性能的 SVG 过渡体验——这正是 Web 矢量动画的最佳实践。
