为什么我的CSS过渡在定义的颜色变量之间不起作用

Question

我正在制作一个交互式SVG图像，它将在2个或更多状态之间转换。切换班级时，我可以立即获得变化，但是没有任何过渡。

我已经尝试将它们放在单独的类中，并且可以进行过渡，但这会很麻烦。

这是我要在其中切换的两个CSS状态

.weatherBackground {
  --color-stop-1:#fff;
  --color-stop-2:#6cddf7;
  --color-1:#fd4b0d;
  --color-2:#ff9b1f;
  --color-windows:#fff;
  --color-3:#ffe96b;
  --stars-opacity:0;
}

.weatherBackground.night {
  -webkit-transition:all 3s ease-out;
  -moz-transition:all 3s ease-out;
  -o-transition:all 33s ease-out;
  transition:all 3s ease-out;
  --color-1:#0056e9;
  --color-2:#3995ff;
  --color-windows:#fffc07;
  --color-stop-1:#000000;
  --color-stop-2:#072254;
  --stars-opacity:1;
}

像这样在SVG中引用

<g id="windows" fill="var(--color-windows)">
<rect width="25" height="25" y="700" x="10"/>
</g>

我想在不同的定义变量之间切换。 --color-1从#fb4b0d减少到#0056e9

编辑： 我放弃了大量更改CSS变量的想法。我相信使用SVG是不可能的，或者根本不值得付出努力，因此我现在针对每个元素单独将其分开。还是谢谢你的建议