SVG线性渐变填充进度条的平滑过渡实现教程-html教程-PHP中文网

SVG线性渐变填充进度条的平滑过渡实现教程

CSS transition 无法直接对 fill 属性中引用的进行插值动画，因为 url(#id) 是不可计算的字符串值；真正需动画的是元素的 offset 属性，必须通过 SVG 原生 SMIL 动画实现平滑过渡。

svg线性渐变填充进度条的平滑过渡实现教程：css `transition` 无法直接对 `fill` 属性中引用的 `` 进行插值动画，因为 `url(#id)` 是不可计算的字符串值；真正需动画的是 `` 元素的 `offset` 属性，必须通过 svg 原生 smil 动画实现平滑过渡。

在构建 SVG Stepper（步骤指示器）时，开发者常尝试通过切换 fill="url(#lg-step-N)" 并配合 CSS transition: fill 实现颜色/长度变化的动效。但该方案必然失效——CSS 过渡仅支持可插值的数值型属性（如 opacity、transform、stroke-width），而 fill 的 url() 值属于不可计算的标识符引用，浏览器无法在两个不同 linearGradient ID 之间生成中间状态。

✅ 正确解法：动画化的 offset 属性
offset 是 SVG 标准属性（非 presentation attribute），虽不支持 CSS 过渡，但完全兼容 SVG 内置的 SMIL 动画规范。通过元素可精确控制渐变停止点的位移，实现丝滑的“填充增长”效果。

✅ 推荐实现结构（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"></path><lineargradient id="lg-step-0"><!-- 主色渐变区：从 0% 开始，到 offset1 结束 --><stop offset="0%" stop-color="blue"></stop><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><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><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"></animate></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><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><animate attributename="offset" from="0.50" to="0.87" begin="indefinite" dur="1s" fill="freeze" calcmode="spline" keysplines="0.42,0,0.58,1"></animate></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 缓动效果（等效 CSS cubic-bezier(0.42,0,0.58,1)）；
双同步动画：主色区与透明区的 offset 必须严格同步变化，否则出现色带撕裂；

Blazor 集成建议：
在 .razor 文件中，使用 @ref 获取元素，通过 JSRuntime 调用 beginElement()：

<animate ...></animate>
@code { private ElementReference step1Anim; }
// C# 中：await JS.InvokeVoidAsync("triggerAnimation", step1Anim);

⚠️ 注意事项

SMIL 动画在现代 Chromium/Firefox/Edge 中完全支持，但已从 Safari 17+ 移除（WebKit 已弃用）。如需 Safari 兼容，请改用 CSS 自定义属性 + @property（需渐进增强）或 Canvas 渲染；
不要为每个步骤重复定义 —— 单组 + 多个更轻量、更易维护；
offset 值推荐使用小数（如 0.14）而非百分比字符串（"14%"），避免解析歧义。