本教程详细介绍了如何在SVG描边中实现圆锥渐变效果。鉴于SVG原生渐变对圆锥渐变支持的局限性，我们将采用一种结合CSS conic-gradient和SVG遮罩（Mask）的混合方法。通过在SVG元素上应用CSS圆锥渐变背景，并利用SVG <mask> 精准控制渐变在描边路径上的显示，从而创建出具有动态色彩过渡的描边效果，尤其适用于进度条等场景。
引言：SVG渐变与圆锥渐变的挑战
SVG提供了强大的图形绘制能力，其中包括两种原生的渐变类型：<linearGradient>（线性渐变）和<radialGradient>（径向渐变）。它们能够满足大部分线性或径向的颜色过渡需求。然而，当我们需要实现一种颜色围绕中心点旋转变化的“圆锥渐变”效果时，SVG的原生渐变就显得力不从心了。
传统的圆锥渐变通常用于饼图、色轮或本文将探讨的进度条等场景，其颜色沿着一个圆形路径进行过渡。直接将这种效果应用于SVG元素的描边（stroke）属性，是SVG开发者常遇到的一个挑战。
核心原理：CSS圆锥渐变与SVG遮罩的结合
为了在SVG描边中实现圆锥渐变，我们将采用一种混合策略，巧妙地结合CSS的conic-gradient()函数和SVG的<mask>元素。
- CSS conic-gradient()：CSS的conic-gradient()函数能够非常方便地创建圆锥渐变效果。我们可以将其作为SVG元素的背景图像（background-image），从而为SVG提供一个具有圆锥渐变图案的“画布”。
- SVG <mask>：SVG的遮罩机制允许我们根据遮罩内容的亮度来控制元素的透明度。具体来说，遮罩中白色区域表示完全不透明（显示内容），黑色区域表示完全透明（隐藏内容），灰色区域则表示半透明。通过在遮罩中绘制一个与我们期望的描边路径完全相同的白色形状，我们可以精准地“裁剪”出SVG背景上的圆锥渐变，使其仅在描边路径上可见。
这种方法的核心思想是：将圆锥渐变作为SVG的背景，然后使用SVG遮罩将其“雕刻”成我们想要的描边形状。
实现步骤详解
我们将以一个带有圆锥渐变描边的圆形进度条为例，详细讲解实现过程。
步骤一：定义SVG结构与CSS背景
首先，我们需要一个SVG容器，并为其设置CSS圆锥渐变背景。
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-1 -1 34 34" class="progress-svg">
<defs>
<!-- 遮罩定义将在此处 -->
<mask id="gradientStrokeMask">
<!-- 遮罩内容将在此处 -->
</mask>
</defs>
<!-- 进度条的背景圆环 (纯色) -->
<circle cx="16" cy="16" r="15.9155" fill="none" stroke="#e2eff0" stroke-width="1.8" class="progress-bar__background" />
<!-- 这个矩形将应用遮罩，并显示圆锥渐变 -->
<rect x="-1" y="-1" width="34" height="34" fill="white" mask="url(#gradientStrokeMask)" class="js-gradient-rect"/>
</svg>
.progress-svg {
/* 应用圆锥渐变作为SVG的背景 */
/* from 0deg 表示渐变从3点钟方向开始，顺时针过渡 */
background-image: conic-gradient(from 0deg, red, yellow, green);
/* 旋转整个SVG，使进度条从12点钟方向开始 */
transform: rotate(-90deg);
height: 300px;
width: 300px;
}
.progress-bar__background {
fill 
