我可以沿 SVG 路径应用渐变吗? [英] Can I apply a gradient along an SVG path?
问题描述
我想在我的网站上放置一个由脚本触发的简单加载指示器.它应该是一个简单的圆弧，它有一个渐变并且在用户等待时旋转.我还没有尝试过动画部分，但现在停留在静态样式上.这是我到目前为止所得到的:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"宽度=100"高度=100"><定义><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>它画了圆弧，从上边缘逆时针到右边缘(270°)，但是渐变错了.不是沿着路径使起点(上边缘，0°)不透明，而终点(右边缘，270°)透明，而是在屏幕空间中从左到右对弧形笔划的结果图像进行着色.
如何使渐变遵循我的弧形路径?
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 is
background-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 路径应用渐变吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
