SVG描边渐变迁移至CSS失效：原因及正确实现方案

问题背景 #

原本通过SVG <defs>定义的线性渐变，能通过stroke: url(#circle-graph-blue-greenish-gradient)正常应用到SVG路径的描边；但尝试直接用CSS的linear-gradient()赋值给stroke时，描边完全不显示。

两种方式不等价的原因 #

1. 渐变类型本质不同
   SVG的<linearGradient>是SVG规范定义的矢量渐变资源，专门为SVG元素的填充/描边设计；而CSS的linear-gradient()是生成位图图像的函数，主要用于CSS背景、mask等属性。
2. stroke属性的取值限制
   SVG的stroke属性仅接受颜色值或SVG渐变/图案的URL引用，不支持CSS图像类型的值。直接赋值linear-gradient()会被浏览器判定为无效值，因此描边无法渲染。

如何在CSS中为stroke定义渐变 #

方案1：SVG渐变+CSS变量（推荐，兼顾兼容性与可维护性） #

保留SVG渐变的定义，用CSS变量统一管理渐变颜色，既符合DRY原则，又能正常兼容所有支持SVG渐变的浏览器：

<!-- 隐藏的SVG渐变定义 -->
<svg class="out-of-flow" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="circle-graph-blue-greenish-gradient">
      <stop offset="0" stop-color="var(--grad-color-1)" />
      <stop offset="100%" stop-color="var(--grad-color-2)" />
    </linearGradient>
  </defs>
</svg>

<!-- 业务SVG -->
<svg class="rotate-90" width="75%" viewBox="0 0 100 100">
  <path class="circle-graph-underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"></path>
  <path d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50" 
        class="circle-graph circle-graph-blue-greenish"
        style="stroke-dashoffset: 251.677;stroke-dasharray: 282.783;"></path>
</svg>

/* 全局管理渐变颜色 */
:root {
  --grad-color-1: #00d5bd;
  --grad-color-2: #24c1ed;
}

.circle-graph-blue-greenish {
  stroke: url(#circle-graph-blue-greenish-gradient);
  stroke-width: 5;
  fill: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg {
  height: 50vh;
}

方案2：CSS mask + 背景渐变（纯CSS方案，兼容性稍弱） #

通过CSS mask将背景渐变限制在描边区域，模拟渐变描边效果，无需额外的SVG渐变定义：

.circle-graph-blue-greenish {
  fill: transparent;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 占位描边，用于mask识别描边区域 */
  stroke: #000;
  /* 将渐变限制在描边范围内 */
  -webkit-mask: stroke-box;
  mask: stroke-box;
  /* 用CSS渐变作为背景 */
  background: linear-gradient(0deg, #00d5bd 0%, #24c1ed 100%);
}

注意：stroke-box mask属性仅支持现代浏览器，旧版IE及部分低版本浏览器不兼容。

关于data URI方案失效的说明 #

你尝试的data URI嵌入SVG渐变方案无法生效，核心原因是：

• data URI中的SVG是独立的文档环境，无法访问主文档的CSS变量，var(--color1)会被当作无效值，导致渐变无颜色；
• 这种方式需要重复编写SVG代码，维护性差，不符合DRY原则，不推荐使用。

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