SVG渐变中元素通过offset（0–1或百分比）定义颜色位置，stop-color设颜色（支持所有CSS语法），stop-opacity控透明度；同offset多stop可实现硬边切换，现代浏览器支持良好但IE9+才兼容且stop-opacity需用rgba替代。
SVG渐变中的 <stop></stop> 元素通过 offset 和 stop-color（以及可选的 stop-opacity）精准控制颜色过渡的位置与外观，偏移量决定颜色“铺到哪”，颜色值决定“铺什么”。
offset 属性：定义颜色出现的相对位置
offset 是必填属性，取值范围为 0 到 1（也可用百分比如 "0%"、"100%"），表示该停止点在渐变轴线上所占的比例位置：
-
offset="0"或"0%"：起始端，对应渐变最开始的颜色 -
offset="0.5"或"50%"：中点，常用于对称过渡或强调中间色 -
offset="1"或"100%"：结束端，对应渐变最终颜色 - 多个 stop 可设置相同 offset，实现硬边切换（如
offset="0.3"和offset="0.3"配不同色）
stop-color 与 stop-opacity：设定颜色与透明度
stop-color 指定该位置的颜色，支持所有 CSS 颜色语法：
- 命名色：
stop-color="red" - 十六进制：
stop-color="#3498db" - RGB/RGBA：
stop-color="rgb(52, 152, 219)"，stop-color="rgba(52, 152, 219, 0.8)" - HSL/HSLA 也完全可用：
stop-color="hsl(204, 67%, 54%)"
stop-opacity 单独控制该停止点的不透明度（默认为 1），与 stop-color 中的 alpha 通道效果一致但更灵活——尤其适合在不改颜色值的前提下动态调整某段渐变的透光程度。
立即学习“前端免费学习笔记（深入）”；
实际写法与常见组合示例
一个典型的线性渐变定义如下：
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff6b6b" />
<stop offset="50%" stop-color="#4ecdc4" />
<stop offset="100%" stop-color="#556270" />
</linearGradient>
</defs>
若需在 30% 处突变颜色（无过渡），可写成：
<stop offset="0.3" stop-color="#f7b731"></stop><stop offset="0.3" stop-color="#00a8cc"></stop>
浏览器会按顺序渲染，后定义的同 offset 停止点会覆盖前一个视觉效果（即实现色块交界）。
注意事项与兼容性提示
尽管现代浏览器对 SVG 渐变支持良好，仍需注意：
-
offset值必须是有效数字或百分比字符串，"0.25"、"25%"合法，"25"（缺%）非法 - 未指定
stop-color时，该 stop 默认透明黑（stop-color="black"+stop-opacity="0"），可能造成意外空白 - IE 仅支持到 IE9+，且不支持
stop-opacity的独立使用（需用 rgba 替代） - 动画
offset或stop-color是可行的，但需通过 CSS @keyframes 或 SMIL（已废弃）或 JS 修改，CSS 动画推荐作用于整个<lineargradient></lineargradient>的gradientTransform
