我正在使用渐变填充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>

我正在使用CSS对其进行样式设置：

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

我正在尝试动态设置偏移量，以在SVG图标中创建一种进度。 但这是行不通的。颜色有效，但不能偏移。 还有其他方法可以通过CSS动态设置偏移位置吗？

非常感谢