搜尋

首頁  >  問答  >  主體

如何在 Next.js 13 中匯入動畫 SVG 文件,同時保持透明度和動畫?

在 Next.js 13 中匯入動畫 SVG 檔案

import Image from "next/image";

export default function Home() {
  return (
    <main className="flex h-screen flex-col items-center">
      <div className="container mt-12 flex flex-col items-center justify-center gap-4 px-4 py-8">
        <object type="image/svg+xml" data="/images/blaze-hero-animation.svg">
          svg hero animation
        </object>
      </div>
      <Image
        src="/images/blaze-hero-animation.svg"
        alt="hero animation"
        width={500}
        height={500}
      />
    </main>
  );
}

物件標籤為我提供了動畫 svg,但背景顏色為白色(原始 svg 具有透明背景。圖像為我提供了透明 svg,但沒有任何動畫。 我需要使用 SVGR 還是其他東西?這是 Next.js 13 中的內容。

我只想導入我的透明動畫 svg 檔案。 id 不想搞亂 SVGR,因為我認為我不應該使用它。

P粉322106755P粉322106755244 天前480

全部回覆(1)我來回復

  • P粉121447292

    P粉1214472922024-03-28 09:01:30

    您可以建立一個 React 元件來封裝您的 SVG,如下所示:

    //LinkArrowIcon.tsx
    type Props = {
      className?: string;
    };
    
    export function LinkArrowIcon({ className, ...props }: Props) {
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width={24}
          height={24}
          viewBox="0 0 24 24"
          className={`w-full h-auto ${className}`}
          {...props}
        >
          <path fill="none" d="M0 0h24v24H0z" />
          <path
            fill="none"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M11 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-5m-7 1L20 4m-5 0h5v5"
          />
        </svg>
      );
    }
    //Home.tsx
    import LinkArrowIcon from "./LinkArrowIcon";
    
    export default function Home() {
      return (
        <main className="flex h-screen flex-col items-center">
          <div className="bg-dark dark:bg-light text-light dark:text-dark">
            <LinkArrowIcon className="w-6 h-auto" />
          </div>
        </main>
      );
    }

    這裡我使用 Tailwind CSS 與主題結合,以確定 SVG 應該使用淺色還是深色(-light-dark 是只是自訂顏色)。
    另請參閱 React SVGR 網站,它會自動將 SVG 轉換為 React 元件。

    注意
    我在使用 Typescript 在某些 SVG 上執行 next build 時遇到了問題,這些 SVG 的主體內有 ## 等標籤。 我嘗試了不同的解決方案,但似乎都無法正常工作,因此我只是將文件擴展名從
    .tsx 替換為 .jsx 並且構建順利.

    回覆
    0
  • 取消回覆