首页 > 文章列表 > SVG 能实现真正的环形渐变吗?

SVG 能实现真正的环形渐变吗?

233 2025-01-11

SVG 能实现真正的环形渐变吗?

实现真正的 SVG 环形渐变

如演示中的 SVG 环形进度条,实际上并未完全实现环形渐变。其本质仍为水平渐变,当环形角度超过 250 度时,就会出现水平渐变效果。那么,SVG 是否可以实现真正的环形渐变,如同 CSS 中的 conic-gradient?

关键代码

`<stop offset="0%" stop-color="#29D65A"></stop>
<stop offset="100%" stop-color="#b3eac3"></stop>`

答案

SVG 无法原生实现环形渐变。SVG 只支持线性渐变和径向渐变。

替代方案

若想实现真正的环形渐变,可以使用 clipPath 和 foreignObject 配合 CSS 来实现。详情可以参考:

[My Struggle to Use and Animate a Conic Gradient in SVG](外部链接)

来源:1731449628