求助：Animated SVG雪花动画无法到达容器底部问题

核心问题梳理 #

1. 内联属性覆盖样式：你给<StyledSvg>设置的width="24"和height="24"是内联属性，优先级高于styled-components中的width:100%、height:100%，导致SVG无法占满父按钮容器。
2. CSS语法错误：StyledSvg里的width: 100%缺少分号，导致后续height:100%样式失效。
3. 动画对象错误：当前是移动整个SVG容器，而非让雪花在容器内部下落，SVG下移100%后会完全移出按钮可视区域，无法呈现完整下落效果。

修改后的代码 #

import "./styles.css";
import styled from "styled-components";

const seasonArray = ["winter", "summer", "autumn"];
const getSeasonValue = (season) => {
  switch (season) {
    case "winter":
      return winter;
    case "autumn":
      return autumn;
    case "summer":
      return summer;
    default:
      return summer;
  }
};

const StyledButton = styled.button`
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 33%;
  position: relative;
  min-width: 30%;
  height: 20%;
  overflow: hidden;
`;

const StyledButtonsWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  height: 100vh;
  padding: 20px;
`;

const StyledSvg = styled.svg`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
`;

const SnowFlakeGroup = styled.g`
  animation: snowFlake 2s linear infinite;
  transform: translateY(-24px);
`;

const SnowFlakeIcon = () => {
  return (
    <StyledSvg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <SnowFlakeGroup>
        <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9" />
        <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9" />
        <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9" />
        <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9" />
        <path d="m17 21-3-6h-4" fill="#88C9F9" />
        <path d="m17 3-3 6 1.5 3" fill="#88C9F9" />
        <path d="M2 12h6.5L10 9" fill="#88C9F9" />
        <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9" />
        <path d="M22 12h-6.5L14 15" fill="#88C9F9" />
        <path d="m4 10 1.5 2L4 14" fill="#88C9F9" />
        <path d="m7 21 3-6-1.5-3" fill="#88C9F9" />
        <path d="m7 3 3 6h4" fill="#88C9F9" />
      </SnowFlakeGroup>
    </StyledSvg>
  );
};

export default function App() {
  return (
    <StyledButtonsWrapper>
      {seasonArray.map((season) => {
        return (
          <StyledButton key={season} label={season}>
            <SnowFlakeIcon />
            {season.charAt(0).toUpperCase()}
            {season.substring(1)}
          </StyledButton>
        );
      })}
    </StyledButtonsWrapper>
  );
}

// 注入全局下落动画
const keyframes = `
  @keyframes snowFlake {
    to {
      transform: translateY(100%);
    }
  }
`;
const styleSheet = document.createElement("style");
styleSheet.innerHTML = keyframes;
document.head.appendChild(styleSheet);

修改逻辑说明 #

• 移除SVG内联宽高，让其通过样式占满按钮容器，同时给按钮添加overflow: hidden避免雪花超出边界。
• 将所有雪花路径包裹在<g>组标签中，给组添加动画，实现雪花在容器内部下落，而非移动整个SVG。
• 调整动画起点：初始让雪花处于容器顶部外（translateY(-24px)），动画结束时移动到容器底部（translateY(100%)），完整呈现下落循环。
• 使用linear线性动画速度，模拟真实雪花下落的匀速效果，可根据需求切换为ease-in-out。

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