SVG内部线性渐变无法作为自身填充的问题求助

我参考相关方案复现线性渐变效果时，仅显示回退颜色，实际网站中还出现错误：

unexpected value var(--percentB) parsing offset attributes

以下是问题排查和修复方案：

问题根源 #

• SVG渐变ID格式错误：<linearGradient id="#anim">中的id包含#，但url(#anim)是引用id为anim的元素，id本身不能带#，导致渐变引用失败，直接触发回退颜色。
• JS元素选择错误：document.getElementById('#anim')多写了#，getElementById的参数是纯ID字符串，不需要前缀，这会导致无法找到目标元素，修改stop标签的逻辑完全失效。
• 渐变stop顺序异常：SVG线性渐变要求stop标签按offset从小到大排列，原reverse函数生成的stop顺序是从100%到0%，违反渲染规则，导致渐变显示异常。

修复后的完整代码 #

HTML #

<svg width="300" height="200" class="banner">
  <defs>
    <linearGradient id="anim">
      <stop offset="var(--percentA)" stop-color="var(--colorA)"></stop>
      <stop offset="calc(var(--percentB)*1%)" stop-color="var(--colorB)"></stop>
      <stop offset="var(--percentC)" stop-color="var(--colorC)"></stop>
    </linearGradient>
  </defs>
  <path class="bannerPath"
    d="
M300 0
L300 40
A60 60 0 0 1 240 100
L0 100
L0 0 
Z"
  ></path>
</svg>

<button onclick="reverse()" class="anim">
k
</button>

CSS #

:root {
  --percentA: 0%;
  --percentC: 100%;
  --colorA: red;
  --colorB: pink;
  --colorC: orange;
}
.bannerPath{
  fill: url(#anim) #f00;
}
@property --percentB {
  syntax: "<number>";
  initial-value: 50;
  inherits: false;
}
.anim {
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-timing-function: linear;
}
@keyframes fade {
  0% {--percentB: 0.01;}
  99.99% {--percentB: 99.99;} 
  100% {--percentB: 0.01;}
}

JavaScript #

function reverse(){
  document.getElementById('anim').innerHTML=`
    <stop offset="var(--percentA)" stop-color="var(--colorC)"></stop>
    <stop offset="calc(var(--percentB)*1%)" stop-color="var(--colorB)"></stop>
    <stop offset="var(--percentC)" stop-color="var(--colorA)"></stop>
  `
}

效果说明 #

修复后，渐变会正常加载，动画驱动--percentB变量控制中间色的滑动效果；点击按钮后，渐变颜色反转，同时保持stop标签的offset顺序正确，避免渲染异常。原错误提示也会因为渐变正常加载、变量正确解析而消失。

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