SVG中linearGradient填充属性过渡动画失效问题求助

问题根源 #

CSS过渡无法在不同url()引用的渐变之间生效，因为这些是离散的资源引用，不属于可插值的数值类型（比如长度、百分比、颜色），浏览器没办法在两个渐变引用之间生成中间状态，所以你的fill属性过渡完全不会触发。

低JS/Blazor友好的解决方案 #

核心思路是复用单个渐变，动态修改渐变内部的offset值——因为offset是百分比数值，支持CSS过渡和插值。这样不用切换fill的url，只需要更新渐变的停止点位置，就能实现平滑的填充进度动画。

实现代码（Blazor组件） #

Razor 标记

<button @onclick="NextStep">Next step</button>

<svg viewBox="0 0 620 50" width="300" height="20" fill="url(#lg-stepper)" stroke="black" stroke-width="1" class="stepper">
    <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="0%" stop-color="blue" />
        <!-- 动态绑定进度百分比 -->
        <stop offset="@CurrentProgress%" stop-color="blue" stop-opacity="0.6" />
        <stop offset="@CurrentProgress%" stop-color="transparent" />
    </linearGradient>
</svg>

@code {
    // 当前进度百分比
    private int CurrentProgress { get; set; } = 6;
    // 各步骤对应的进度值，和你原来的渐变offset对应
    private readonly int[] StepProgresses = { 6, 14, 50, 87 };
    private int CurrentStepIndex { get; set; } = 0;

    private void NextStep()
    {
        if (CurrentStepIndex < StepProgresses.Length - 1)
        {
            CurrentStepIndex++;
            CurrentProgress = StepProgresses[CurrentStepIndex];
        }
    }
}

CSS 样式

/* 给渐变停止点添加过渡动画 */
.stepper stop {
    transition: offset 1s ease-in-out;
}

方案说明 #

1. 移除多渐变，复用单个渐变：不再维护多个lg-step-x渐变，只保留一个lg-stepper，通过动态修改停止点的offset来控制填充范围。
2. Blazor绑定驱动变化：用Blazor的属性绑定直接控制stop的offset值，点击按钮时更新CurrentProgress，自动触发DOM更新。
3. CSS过渡生效：因为offset是可插值的数值类型，CSS过渡可以平滑地从旧值过渡到新值，实现你想要的渐变填充动画。

替代方案（SVG原生动画） #

如果需要更精细的动画控制，或者担心某些浏览器对CSS过渡offset的支持，可以改用SVG原生的<animate>元素，不需要额外JS：

修改Razor中的stop元素：

<stop offset="@CurrentProgress%" stop-color="blue" stop-opacity="0.6">
    <animate attributeName="offset" dur="1s" values="@PreviousProgress%;@CurrentProgress%" fill="freeze" />
</stop>

然后在@code中维护上一次的进度值：

private int PreviousProgress { get; set; } = 6;

private void NextStep()
{
    if (CurrentStepIndex < StepProgresses.Length - 1)
    {
        PreviousProgress = CurrentProgress;
        CurrentStepIndex++;
        CurrentProgress = StepProgresses[CurrentStepIndex];
    }
}

这种方式利用SVG的原生动画系统，同样不需要额外JS，完全由Blazor的数据绑定驱动。

总结 #

抛弃切换fill属性的思路，改为动态调整单个渐变的停止点位置，是实现平滑过渡最直接且Blazor友好的方案。整个实现几乎不需要JS，完全用Blazor的组件绑定和CSS/SVG动画完成。

内容的提问来源于stack exchange，提问作者Symtox