使用Framer Motion为SVG路径添加动画遇到问题

我用Canva制作了项目Logo的SVG文件，想给其中部分路径添加动画但遇到了问题。因为是项目Logo，我无法自行编写SVG代码，已优化文件保证简洁轻量。

在React中通过SVGR Playground将SVG转成React组件后，整个SVG的透明度动画（比如motion.svg里的opacity）能正常工作，但path元素的动画完全没有效果，其他功能均正常。我真正想要添加动画的是两个带有fill属性逻辑的path，既试过用variants，也试过直接将对象传入initial、animate和transition属性，都没有作用。

想问会不会是其他元素阻挡了动画效果？或者需要使用pathLength之外的其他属性？

组件代码 #

const pathVariants = {
  hidden: {
    pathLength: 0,
  },
  visible: {
    pathLength: 1,
    transition: 1.5,
  },
};

export function ProjectLogo(props) {
  return (
    <motion.svg
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.8, delay: props.theme === 'dark' ? 1.2 : 0.4 }}
      xmlns="http://www.w3.org/2000/svg"
      width={500}
      height={500}
      viewBox="0 0 375 375"
      {...props}
    >
      <defs>
        <clipPath id="a">
          <motion.path
            variants={pathVariants}
            initial="hidden"
            animate="visible"
            d="M5.496 71h363.75v233H5.496Zm0 0"
          />
        </clipPath>
      </defs>
      <g clipPath="url(#a)">
        <motion.path
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          fill={props.theme === 'dark' ? '#f6f5fc' : '#000000'}
          d="m52.219 187.45 65.105 52.663-11.886 28.2-99.942-80.864L149.324 71.066v37.805Zm217.09-80.86-11.887 28.195 65.105 52.664-97.105 78.512v37.805l143.824-116.383Zm-48.797-35.524-98.211 232.7h31.93l98.214-232.7Zm0 0"
        />
      </g>
      <motion.path
        fill="#f0f"
        d="M150.043 180.994h-26.879v11.027h14.266c-2.23 7.133-8.43 12.32-16.5 12.32-10.16 0-17.368-8.285-17.368-18.445s7.208-18.449 17.368-18.449c3.601 0 6.847 1.008 9.441 2.813l8.07-8.07c-4.902-3.606-10.953-5.766-17.511-5.766-16.285 0-29.473 13.187-29.473 29.472 0 16.285 13.188 29.47 29.473 29.47 16.285 0 29.472-13.185 29.472-29.47 0-1.66-.144-3.316-.359-4.902Zm0 0"
      />
      <motion.path
        fill="#0ff"
        d="M154.496 183.166h-26.879v11.027h14.266c-2.23 7.133-8.43 12.32-16.5 12.32-10.16 0-17.368-8.285-17.368-18.445s7.208-18.45 17.368-18.45c3.601.001 6.847 1.009 9.441 2.813l8.07-8.07c-4.902-3.605-10.953-5.765-17.511-5.765-16.285 0-29.473 13.187-29.473 29.472 0 16.285 13.188 29.469 29.473 29.469 16.285 0 29.472-13.184 29.472-29.469 0-1.66-.144-3.316-.359-4.902Zm0 0"
      />
      <motion.path
        variants={pathVariants}
        initial="hidden"
        animate="visible"
        fill={props.theme === 'dark' ? '#f6f5fc' : '#000000'}
        d="M152.27 182.08h-26.88v11.027h14.266c-2.23 7.133-8.43 12.32-16.5 12.32-10.16 0-17.367-8.285-17.367-18.445s7.207-18.449 17.367-18.449c3.602 0 6.848 1.008 9.442 2.813l8.07-8.07c-4.902-3.606-10.953-5.766-17.512-5.766-16.285 0-29.472 13.187-29.472 29.472 0 16.285 13.187 29.469 29.472 29.469 16.285 0 29.473-13.184 29.473-29.469 0-1.66-.145-3.316-.36-4.902Zm0 0"
      />
    </motion.svg>
  );
}

核心问题：pathLength对填充型路径无效 #

你用的pathLength动画只对描边型路径生效，它控制的是路径描边的长度变化，而你要动画的是填充区域的path，这个属性根本不会影响填充的视觉表现，所以动画毫无效果。另外从代码看，没有元素会遮挡目标path的动画——目标path在SVG最外层，层级最高，和遮挡无关。

两种可行的实现方案 #

方案1：实现描边绘制动画（适合路径轮廓显现）

给目标path添加描边属性，配合stroke-dasharray和stroke-dashoffset实现路径绘制效果：

// 修改动画配置
const pathVariants = {
  hidden: {
    strokeDashoffset: 1,
    pathLength: 0,
  },
  visible: {
    strokeDashoffset: 0,
    pathLength: 1,
    transition: { duration: 1.5, ease: "easeInOut" }
  },
};

// 给目标path添加描边属性，确保描边颜色和填充色一致
<motion.path
  variants={pathVariants}
  initial="hidden"
  animate="visible"
  fill={props.theme === 'dark' ? '#f6f5fc' : '#000000'}
  stroke={props.theme === 'dark' ? '#f6f5fc' : '#000000'}
  strokeWidth="2" // 根据Logo尺寸调整粗细
  d="..." // 原路径的d属性
/>

方案2：实现填充区域渐变显现（适合整块区域出现）

如果想要填充区域从某个方向逐渐显现，给目标path套一个motion.g容器，动画容器的缩放或位移：

// 示例：从左到右显现填充区域
const containerVariants = {
  hidden: { scaleX: 0, originX: 0 },
  visible: { scaleX: 1, originX: 0, transition: { duration: 1.5 } }
};

// 把目标path放到motion.g容器中
<motion.g variants={containerVariants} initial="hidden" animate="visible">
  <path
    fill={props.theme === 'dark' ? '#f6f5fc' : '#000000'}
    d="..." // 原路径的d属性
  />
</motion.g>

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