javascript - SVG 不会在 Chrome/Brave 中渲染,但在 Edge 中可以正常工作
问题描述
我设法渲染了我gist.github
在 Microsoft Edge 中托管的 SVG 文件,但它在 Brave 和 Chrome 等 Chromium 浏览器中不起作用。
我尝试了一切在 Chrome 上渲染它,但它只是没有用。这是 SVG 文件的特定问题吗?我使用 Inkscape 创建了文件并尝试了两个 SVG 版本(Inkscape 和 Plain)。
这是反应组件
import React from "react";
import { Container } from "@material-ui/core";
import Particles from "react-tsparticles";
export default function Banner() {
return (
<Container >
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "#000",
},
},
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: 1,
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.3,
type: "inline",
url:
"https://raw.githubusercontent.com/gist/asralf90/22ed5c73043e9e2f4c7339de30fbc2fa/raw/8b7db616f49376f40d46c75ab13e95ab773d79d6/polygonmask2.svg",
},
}}
/>
</Container>
);
}
解决方案
推荐阅读
- android - 如何限制服务更新Activity Textview?
- forms - 关注 NativeScript+Angular 应用程序中的文本字段时,表单字段不会向上移动
- vue.js - v-treeview 在初始加载期间检查项目
- javascript - 包含动态值作为子字符串的字符串的 Postman 断言
- php - Elasticsearch,忽略 GET 响应中的内置映射细节
- python - 如何在嵌套的 for 循环中使用“i”和“j”编写线性递增函数?
- sh - 移动 ttf 文件会导致额外的扩展名
- angular - Ngx 翻译和表格排序
- java - 使用 spring boot 动态连接到不同的数据库
- linux - 从文本文件的第一行开头删除匹配的模式