SVG/CSS Animation无法旋转，求排查问题原因

你的代码存在几个关键问题，导致动画无法正常工作：

• CSS属性写法错误：SVG元素内不能直接使用css-transition、css-animation这类写法，所有CSS样式需要放在style属性中包裹。
• 未定义动画关键帧：你引用的rotate动画没有通过@keyframes定义具体的动画行为。
• 缺少变换原点设置：默认情况下rect的旋转原点是左上角，添加transform-origin: center center能让它绕中心旋转，符合预期效果。

修复后的完整代码如下：

<svg width="100px" height="100px">
  <style>
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
  <rect 
    x="10" 
    y="10" 
    width="80" 
    height="80" 
    fill="#f7f3d1" 
    style="transition: all 1s ease; animation: rotate 5s infinite linear; transform-origin: center center;"
  />
</svg>

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