Next.js 14.1中动画SVG组件移动端不显示问题求助

问题描述 #

使用Next.js v14.1开发项目时，实现了一个环绕头像的旋转文本SVG组件，桌面端及窗口尺寸调整时均能正常渲染，但在移动端视图中完全不显示。已尝试AI工具排查、添加CSS @media规则调整样式，问题仍未解决。

组件代码 #

"use client";
import "./rotating-text.css";

const RotatingText = () => {
  return (
    <div className="rounded-text rotating absolute inset-0 flex justify-center items-center">
      <svg viewBox="0 0 200 200" className="w-full h-full">
        <path
          id="textPath"
          d="M 85,0 A 85,85 0 0 1 -85,0 A 85,85 0 0 1 85,0"
          transform="translate(100,100)"
          fill="none"
        ></path>
        <g fontSize="1.156rem">
          <text textAnchor="start">
            <textPath href="#textPath" startOffset="0%">
              - Andre Castillon - Web Developer - UX / UI Designer
            </textPath>
          </text>
        </g>
      </svg>
    </div>
  );
};

export default RotatingText;

CSS样式 #

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 18s linear infinite;
}

.rounded-text {
  text-transform: uppercase;
  transform: rotate(-90deg);
  fill: #fbfbfb;
  font-weight: bold;
  position: absolute;
  text-shadow: 2px 2px 4px #151419;
}

@media (max-width: 768px) {
  .rotating {
    animation-duration: 36s; /* 移动端放慢旋转速度 */
  }
  .rounded-text {
    transform: rotate(-90deg); /* 恢复原旋转角度，避免叠加偏移 */
    text-shadow: 1px 1px 3px #151419;
  }
  .rounded-text g {
    font-size: 0.8rem; /* 缩小字体适配移动端 */
  }
}

首页使用代码 #

"use client";
import Image from "next/image";
import portrait from "/public/images/Portrait-BW.png";
import RotatingText from "@/components/rotating-text/RotatingText";
import Cursor from "@/components/Cursor";
import { useState } from "react";
import RippleButton from "@/components/ripple-button/RippleButton";
import Contact from "@/components/contact/Contact";

export default function Home() {
  const [isActive, setIsActive] = useState(false);

  return (
    <main className="flex min-h-screen mx-auto px-6 items-center flex-col bg-dark-void">
      <div
        onMouseOver={() => setIsActive(true)}
        onMouseLeave={() => setIsActive(false)}
        className="my-14 relative z-10 max-w-[700px] w-full"
      >
        <Image
          src={portrait}
          width={700}
          height={700}
          alt="Picture of the author"
          quality={100}
          priority={true}
          className="rounded-full w-full h-auto"
        />
        <RotatingText />
      </div>

      <div className="z-10">
        <RippleButton />
      </div>

      <div className="z-10">
        <Contact />
      </div>

      <Cursor isActive={isActive} />
    </main>
  );
}

核心修复点说明 #

1. SVG尺寸适配：给SVG添加w-full h-full类，确保它能自适应父容器尺寸，避免移动端因容器缩小导致SVG被挤压或隐藏。
2. 字体大小调整：在移动端媒体查询中缩小文本字体（0.8rem），防止文本因尺寸过大超出SVG可视区域或被裁剪。
3. 旋转角度修正：移除移动端rotate(-45deg)的修改，避免与组件的旋转动画叠加导致文本偏移出可视范围。
4. 头像响应式处理：给头像容器添加max-w-[700px] w-full，同时给Image组件设置w-full h-auto，确保头像在移动端自动缩小，SVG容器能正确匹配头像尺寸。
5. 路径半径可选调整：如果文本仍有溢出，可将SVG路径中的85（半径值）改为更小的数值（如60），适配更小的移动端容器：

   <path
     id="textPath"
     d="M 60,0 A 60,60 0 0 1 -60,0 A 60,60 0 0 1 60,0"
     transform="translate(100,100)"
     fill="none"
   ></path>
   

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