React内联SVG路径无法响应CSS动画效果问题求助

问题排查与修复方案 #

通用前置检查

首先确认你导入的SVG组件支持透传className属性：如果是通过SVGR（Create React App默认配置）导入的SVG，默认会将props透传给内部的

1. 三角形无动画修复

核心问题：代码中所有transform属性拼写错误，少写了字母s，写成了tranform，浏览器无法识别该属性，导致动画完全不生效。
额外优化：添加transform-origin: center，让三角形绕自身中心旋转，避免默认以左上角为旋转点的生硬效果。

修复后代码：

.triangles > g > path {
    animation: triangle-animation 2.2s cubic-bezier(.36,.07,.19,.97) both infinite;
    transform-origin: center;
}

@keyframes triangle-animation {
  10%, 90% {
    transform: rotate(5deg);
  }
  
  20%, 80% {
    transform: rotate(90deg);
  }

  30%, 50%, 70% {
    transform: rotate(180deg);
  }

  40%, 60% {
    transform: rotate(30deg);
  }
  100% { 
      transform: rotate(0deg);
  }
}

如果动画仍未生效，检查你的SVG内部结构，确认三角形path节点确实是g标签的直接子节点，否则需要调整选择器匹配实际结构。

2. Blob波浪无动画修复

核心问题：margin是HTML盒模型属性，对SVG内部的path元素完全不生效，实现SVG元素位移需要使用transform: translate()属性。另外你设置的-2000px位移过大，会直接将元素移出视口，自然看不到动画效果。
如果要实现波浪变形效果，需要对path的d属性做插值动画，简单的平移动画可以参考以下修复代码：

.waves > path {
  animation: wave-animation 4s infinite alternate;
}

@keyframes wave-animation {
  0%   {
    transform: translate(0, 0);
    }  
  50%  {
    transform: translate(-20px, 10px);
    }  
  100% {
    transform: translate(0, 0);
    }
}

3. 圆形抖动不符合预期修复

你当前的抖动仅设置了X轴位移，效果比较生硬，可添加Y轴微小偏移+小角度旋转还原自然抖动效果，若需要持续抖动则添加infinite动画属性：

.circles > circle {
    animation: shake 2.2s cubic-bezier(.36,.07,.19,.97) both infinite;
    transform-origin: center;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, -1px, 0) rotate(-1deg);
  }
  
  20%, 80% {
    transform: translate3d(2px, 1px, 0) rotate(1deg);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, -2px, 0) rotate(-2deg);
  }

  40%, 60% {
    transform: translate3d(4px, 2px, 0) rotate(2deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

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