如何在 Next.js 13 中导入动画 SVG 文件，同时保持透明度和动画？-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

如何在 Next.js 13 中导入动画 SVG 文件，同时保持透明度和动画？

P粉322106755 2024-03-27 13:38:40

[React讨论组]

1062

在 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粉322106755

全部回复(1)

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

您可以创建一个 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 并且构建顺利.