Reactjs 如何使用帧运动设置填充动画？

我用下面的方法尝试用帧运动将一个简单的正方形从红色变为绿色。如果我对不透明性使用完全相同的代码，一切都正常。同样，如果我用x和y变换正方形。但使用“填充”，只要正方形渲染，它就会更改“填充”，并且没有过渡。经过几个小时的努力去理解为什么会这样，我找不到答案

在文档中，它说“例如，x或比例等物理属性将通过弹簧模拟来设置动画。而不透明度或颜色等值将使用tween来设置动画。”

它没有提到我是否需要做更多的工作来创造这个二人世界

非常感谢您的帮助，谢谢

  const pathVariants = {
    notSwitched: {
      fill: 'red',
    },
    switched: {
      fill: 'green',
    },
  }
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="600"
      height="300"
      viewBox="0 0 600 300"
    >
      <motion.path
        initial="switched"
        animate="notSwitched"
        variants={pathVariants}
        id="square"
        d="M38,212V88H162V212Z"
      />
    </svg>
  )

const路径变量={
未切换：{
填充：“红色”，
},
切换：{
填充：“绿色”，
},
}
返回(
)

有什么解决方案吗？嗨，安德鲁，是的，尝试使用十六进制代码Hanks Raph117:）有什么解决办法吗？嗨，安德鲁，是的，试着使用十六进制代码（汉克斯：117！）