SVG 图像在 React.js 编译后显示奇怪的阴影

Question

I have a svg image that contains some shadows on several elements and it works nicely in a django project.我有一个 svg 图像，其中包含几个元素上的一些阴影，它在 django 项目中运行良好。 I now included that in my react.js project and it suddenly drops weird shadows.我现在将它包含在我的 react.js 项目中，它突然掉落了奇怪的阴影。 Why's that and where to fix this in react?为什么会这样以及在何处解决此问题？

// Landing.js

import Body from './Body'
import { ReactComponent as Logo } from '../../assets/images/illu_how.svg'
import React from "react";

import './Landing.css'

function Landing(props) {
    return (
        <Body>
        <div className="image-wrapper animate__animated animate__fadeInRight"><Logo classname="illu_how" /></div>
</Body>

JS fiddle due to SO character limitation由于 SO 字符限制，JS 小提琴

React.js project: React.js 项目：

Django project: Django项目：

Answer 1

I got it finally... the issue was the import我终于明白了......问题是进口

import { ReactComponent as Logo } from '../../assets/images/illu_how.svg'

that caused the shadow problem for whatever reason.无论出于何种原因导致阴影问题。

This works just fine:这很好用：

import illustration from '../../assets/images/illu_how.svg'

SVG 图像在 React.js 编译后显示奇怪的阴影

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-04-02 15:42:07

SVG 图像在 React.js 编译后显示奇怪的阴影

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-04-02 15:42:07

解决方案1
0 已采纳 2022-04-02 15:42:07