多边形蒙版 SVG 图像不适用于 React 中的 tsparticles

Question

我有一个 React 项目，我想使用 tsparticles 将我的徽标嵌入为多边形蒙版。 如果我使用官方文档页面中的示例代码，它可以正常工作，但是如果我尝试使用多边形掩码选项，它似乎无法检测到 SVG 格式。 不知道是不是浏览器的问题。

下面是嵌入到我的 React 项目中的创建者来自 codepen 的原始代码。 我有自己的徽标，我将其存储在本地，但对于这个问题，我将使用代码原作者的代码。

import React from "react";
import { Container} from "@material-ui/core";
import Particles from "react-tsparticles";
//import polygonmasklogo from "./polygonmask.svg";


export default function Banner() {
 

  return (
    <Container >
      <Particles
        id="tsparticles"
        options={{
          background: {
            color: {
              value: "#fff",
            },
          },
          detectRetina: false,
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              onHover: {
                enable: true,
                mode: "bubble",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 40,
                duration: 2,
                opacity: 8,
                size: 6,
                speed: 3,
              },
            },
          },
          particles: {
            color: {
              value: "#ff0000",
              animation: {
                enable: true,
                speed: 20,
                sync: true,
              },
            },
            lineLinked: {
              blink: false,
              color: "random",
              consent: false,
              distance: 30,
              enable: true,
              opacity: 0.3,
              width: 0.5,
            },
            move: {
              attract: {
                enable: false,
                rotate: {
                  x: 600,
                  y: 1200,
                },
              },
              bounce: false,
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 1,
              straight: false,
            },
            number: {
              density: {
                enable: false,
                area: 2000,
              },
              limit: 0,
              value: 200,
            },
            opacity: {
              animation: {
                enable: true,
                minimumValue: 0.05,
                speed: 2,
                sync: false,
              },
              random: false,
              value: 1,
            },
            shape: {
              type: "circle",
            },
            size: {
              animation: {
                enable: false,
                minimumValue: 0.1,
                speed: 40,
                sync: false,
              },
              random: true,
              value: 1,
            },
          },
          polygon: {
            draw: {
              enable: true,
              lineColor: "rgba(255,255,255,0.2)",
              lineWidth: 0.3,
            },
            move: {
              radius: 10,
            },
            inlineArrangement: "equidistant",
            scale: 0.5,
            type: "inline",
            //url: {polygonmasklogo},
            url: "https://cdn.matteobruni.it/images/particles/smalldeer.svg",
          },
        }}
      />
    </Container>
  );
}

Answer 1

多边形蒙版功能需要pathseg库才能在某些浏览器中正常工作（Chrome 在最新版本中删除了 SVG 1.1 支持）

pathseg是一个客户端库，如tsParticles ，因此如果您使用的框架使用 SSR，则需要查看客户端导入的文档。

我这里有一个Next.js的工作样本

这是返回<Particles />组件之前Next.js所需的代码：

if (process.browser) {
  require("pathseg");
}

如果您使用React客户端，只需像这样导入pathseg ：

import "pathseg";

这应该可以解决您的问题。