SVG LinearGradient的stop-offset属性用法与渐变效果实现问题

SVG stop-offset 属性核心说明 #

stop-offset 用来定义线性/径向渐变中每个色标的位置，取值为0%到100%（或0到1的数值），代表从渐变起点到渐变终点的距离占比：

• 取值为0%：对应渐变的起始点位置
• 取值为100%：对应渐变的结束点位置
• 多个stop的offset值必须从小到大排列，否则后面数值更小的offset会自动被调整为和前一个值相等，直接出现颜色硬边界

现有代码问题梳理 #

你当前配置的渐变规则实际效果如下：

1. 渐变原始方向为从上到下（x1="0%" y1="0%" x2="0%" y2="100%"）
2. 通过gradientTransform="rotate(35)"把渐变整体旋转了35度
3. 两个色标分别落在30%、70%的渐变路径位置：
   • 渐变起点到30%位置为纯#e31cf0
   • 30%到70%区间为两种颜色的过渡渐变
   • 70%到渐变终点位置为纯#4a96ef

另外你代码存在两个隐性问题会导致渐变不生效：

• div元素和linearGradient元素都用了id="progress"，id重复会导致渐变引用失效
• circle元素没有写fill属性关联渐变

这里给你修正后的可运行示例，你可以调整offset值直观观察效果差异：

<div id="progress">
    <svg viewBox="0 0 100 100">
        <linearGradient id="progressGradient" x1="0%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(35)">
            <!-- 调整offset值即可改变渐变过渡位置 -->
            <stop offset="30%" stop-color="#e31cf0" />
            <stop offset="70%" stop-color="#4a96ef" />
        </linearGradient>
        <circle cx="50" cy="50" r="45" fill="url(#progressGradient)" />
    </svg>
</div>

常见使用技巧 #

• 要实现硬切双色效果：把两个相邻stop的offset设为相同值即可，比如<stop offset="50%" stop-color="#e31cf0" /><stop offset="50%" stop-color="#4a96ef" />，两种颜色会在50%位置直接切换无过渡
• 要实现多色渐变：按顺序新增stop标签，offset值从小到大排列即可
• 要实现环形进度条的截断渐变：给上层进度circle添加stroke-dasharray属性配合offset调整即可

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