如何使渐变遵循我的弧形路径? 解决方案 CSS Images Module - Level 4 引入了 圆锥梯度.根据 MDN，支持 在除 IE 之外的所有主流浏览器中.虽然从技术上讲，它不是沿路径的渐变，但由于您的路径是圆形，因此可以通过以下方式实现所需的结果:.loader {--尺寸:7.5rem；--stroke-size: .5rem;--diff: calc(calc(var(--size)/2) - var(--stroke-size));背景图像:圆锥梯度(透明 25%，红色)；宽度:var(--size);高度:var(--size);边界半径:50%；-webkit-mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%);掩码:径向梯度(圆形变量(--diff)，透明 98%，#fff 100%)；动画:旋转1.2s线性无限；边距:0 自动；}@关键帧旋转{从 {变换:旋转(0)；}到 {变换:旋转(1转)；}}身体 {背景:#f9fcfc url(https://picsum.photos/id/22/1323/880) 100%/cover;边距:0；最小高度:100vh；填充顶部:2.5rem；}* { box-sizing: border-box;}<div class="loader"></div>相关位是background-image: conic-gradient(transparent 25%, red);注意:如果不是很明显，CSS 变量不是必需的，我只是想有一种方法可以在多种尺寸下测试它，而不必在多个地方修改值.注意: 也可以使用 来屏蔽内圈.我怀疑它可能比 mask 具有更好的浏览器支持.但这超出了这个问题的范围.在发布时，我的示例似乎在最新版本中按预期工作:Chrome、Firefox 和 Edge.没有测试过 Safari.没想到它可以在任何版本的 IE 中运行.I'd like to put a simple loading indicator on my website that's triggered by a script. It should be a simple circle arc that's got a gradient and is spinning while the user is waiting. I haven't tried the animation part, but got stuck on the static styling for now. Here's what I've got so far:<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <defs> <linearGradient id="grad1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="red" stop-opacity="0" /> </linearGradient> </defs> <path d="M50 10 A40 40 0 1 0 90 50" stroke="url(#grad1)" stroke-width="10" fill="transparent"/> </svg>It draws the arc, from the top edge anti-clockwise to the right edge (270°), but the gradient is wrong. Instead of following the path so that the beginning (top edge, 0°) is opaque and the end (right edge, 270°) is transparent, the resulting image of the arc stroke is coloured from left to right in screen space.How can I make the gradient follow my arc path? 解决方案 CSS Images Module - Level 4 has introduced conic-gradient. According to MDN, it's supported in all major browsers except IE.Although it's not, technically, a gradient along a path, since your path is a circle, the desired outcome can be achieved with:.loader { --size: 7.5rem; --stroke-size: .5rem; --diff: calc(calc(var(--size)/2) - var(--stroke-size)); background-image: conic-gradient(transparent 25%, red); width: var(--size); height: var(--size); border-radius: 50%; -webkit-mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%); mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%); animation: rotate 1.2s linear infinite; margin: 0 auto;}@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(1turn); }}body { background: #f9fcfc url(https://picsum.photos/id/22/1323/880) 100% /cover; margin: 0; min-height: 100vh; padding-top: 2.5rem;} * { box-sizing: border-box; }<div class="loader"></div>The relevant bit isbackground-image: conic-gradient(transparent 25%, red);Note: If not obvious, the CSS variables are not necessary, I just wanted a way to test it at multiple sizes without having to modify the values in more than one place.Note: Masking the inner circle can also be achieved using an <svg />. I suspect it might have better browser support than mask. But that's outside of this question's scope.At the time of posting, my example seems to work as expected in latest: Chrome, Firefox and Edge. Haven't tested Safari. Not expecting it to work in any version of IE. 这篇关于我可以沿 SVG 路径应用渐变吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
