svg的path能否实现真正的环形渐变?
如demo所示的svg实现的环形进度条,实际上未能完全实现环形渐变,本质还是水平渐变,环形度数超过250度,就会体现出水平渐变。svg能否实现环形渐变?就像css的conic-gradient一样。因为conic-gradient会产生锯齿,所以才使用svg来实现,渐变效果不太理想。关键代码
<div style="width:150px;height:150px">
<svg width="100%" height="100%" class="progress" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="#29D65A"></stop>
<stop offset="100%" stop-color="#b3eac3"></stop>
</linearGradient>
</defs>
<circle class="c1" cx="50%" cy="50%" r="45%" stroke="#eee" stroke-width="5" fill="none" stroke-linecap="round" stroke-dasharray="283"></circle>
<path d="M 50 50 m 45 0 a 45 45 0 1 1 -0.08879722072777696 -2.825573378819097" fill="none" stroke="url(#grad1)" stroke-width="5" stroke-linecap="round"></path>
</svg>
</div>
回复
1个回答
test
2024-06-18
不能,SVG 只支持线性渐变和径向渐变。不过你可以使用 clipPath
和 foreignObject
配合 CSS 实现环形渐变:
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容