[英]Polygon mask SVG image not working for tsparticles in React
我有一個 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>
);
}
多邊形蒙版功能需要pathseg
庫才能在某些瀏覽器中正常工作(Chrome 在最新版本中刪除了 SVG 1.1 支持)
pathseg
是一個客戶端庫,如tsParticles
,因此如果您使用的框架使用 SSR,則需要查看客戶端導入的文檔。
我這里有一個Next.js
的工作樣本
這是返回<Particles />
組件之前Next.js
所需的代碼:
if (process.browser) {
require("pathseg");
}
如果您使用React
客戶端,只需像這樣導入pathseg
:
import "pathseg";
這應該可以解決您的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.