Framer Motion中<motion.svg>布局动画失效问题求助

核心原因 #

Framer Motion的layout动画依赖标准HTML元素的CSS盒模型监听尺寸、位置变化，但SVG元素的布局模型和普通HTML元素存在本质差异：

• SVG的尺寸计算受viewBox、preserveAspectRatio等专属属性影响，CSS的width/height更多是作为缩放参考，而非直接定义盒模型边界
• layout特性无法正确识别SVG元素的尺寸变化逻辑，因此无法触发预期的过渡动画

可行解决方案 #

方案1：使用animate属性直接驱动尺寸变化 #

放弃layout，改用animate属性直接控制SVG的宽高，让Framer Motion直接处理数值过渡：

// 修改后的BlobSvg.tsx中motion.svg部分
<motion.svg
  xmlns="http://www.w3.org/2000/svg"
  className={blobStyles.svg}
  animate={{ 
    width: blobDrawn ? 150 : 300, 
    height: blobDrawn ? 150 : 300 
  }}
  transition={transition}
  onClick={toggleBlobDrawn}
/>

同时可以移除SCSS中.svg[data-blobdrawn="true"]的样式规则，避免样式冲突。

方案2：用motion.div包裹SVG，让容器承担布局动画 #

将SVG嵌套在motion.div中，让容器通过layout处理尺寸动画，SVG自身设置为100%宽高以自适应容器：

// 修改后的BlobSvg.tsx中SVG部分
<div className={blobStyles.svg_container}>
  <motion.div
    layout
    className={blobStyles.svg_wrapper}
    data-blobdrawn={blobDrawn}
    transition={transition}
    onClick={toggleBlobDrawn}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={blobStyles.svg}
    />
  </motion.div>
</div>

对应的SCSS调整：

.svg_wrapper {
  width: 300px;
  height: 300px;
  margin: auto;
}

.svg_wrapper[data-blobdrawn="true"] {
  width: 150px;
  height: 150px;
}

.svg {
  width: 100%;
  height: 100%;
  background: orange;
}

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