Css 使用var设置SVG渐变中的偏移位置

我使用渐变填充svg路径。 像这样：

<svg viewBox="0 0 40 40">
  <defs>
    <linearGradient id="progress-gradient" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="var(--offset-empty)" stopColor="var(--color-empty)" />
      <stop offset="var(--offset-full)" stopColor="var(--color-full)" />
    </linearGradient>
  </defs>
  <path d="..removed" fill="url(#progress-gradient)" />
</svg>

我试图动态设置偏移量，以便在SVG图标中创建一种进度。 但这不起作用。颜色可以工作，但不能偏移。 有没有其他方法可以使用CSS动态设置偏移位置

---

非常感谢

offset是，它不是CSS属性，所以您不能使用CSS变量来设置它。@RobertLongson是stopColor，但我可以用var（）来更改它。stopColor是CSS属性，offset不是。

#progress-gradient {
    --color-empty: #ffffff;
    --color-full: #ff0000;
    --offset-empty: 50%;
    --offset-full: 100%;
}