如何为SVG stroke应用conic gradient（锥形渐变）？

SVG本身没有原生的<conicGradient>元素，没法直接给stroke设置锥形渐变，下面是两种实用的实现思路和代码示例：

实现思路与示例 #

思路一：CSS锥形渐变 + SVG遮罩（Mask） #

核心思路就是先让CSS生成锥形渐变背景，再用SVG的形状做遮罩，只保留stroke区域显示渐变，填充区域完全透明。

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 定义遮罩：只保留圆形的stroke轮廓 -->
  <mask id="strokeMask">
    <!-- 白色底层：让遮罩外的区域隐藏 -->
    <rect width="100%" height="100%" fill="white"/>
    <!-- 黑色stroke：这部分会显示上层的渐变 -->
    <circle cx="100" cy="100" r="80" fill="none" stroke="black" stroke-width="20"/>
  </mask>
  
  <!-- 带渐变的矩形，通过遮罩只显示stroke区域 -->
  <rect width="100%" height="100%" 
        style="mask: url(#strokeMask); 
               background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);"/>
</svg>

思路二：SVG Pattern + 锥形渐变 #

把锥形渐变做成SVG的<pattern>，直接作为stroke的填充内容，这种方法更贴合SVG的使用习惯。

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 定义pattern：将锥形渐变作为填充单元 -->
  <pattern id="conicPattern" width="100%" height="100%" patternContentUnits="objectBoundingBox">
    <rect width="1" height="1" style="background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);"/>
  </pattern>
  
  <!-- 直接把pattern应用到stroke上 -->
  <circle cx="100" cy="100" r="80" fill="none" stroke="url(#conicPattern)" stroke-width="20"/>
</svg>

注意事项 #

• 兼容性：CSS conic-gradient支持所有现代浏览器，要是需要兼容旧版IE，可以用Canvas生成锥形渐变图像，再替换到pattern里。
• 复杂路径：如果是不规则的复杂路径，用遮罩的方法效果更稳定，pattern可能需要调整坐标对齐方式来适配路径。

内容的提问来源于stack exchange，提问作者Nick