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

Question

我有一个 svg 图像，在几个元素上包含一些阴影，它在 django 项目中工作得很好。我现在将其包含在我的 react.js 项目中，它突然出现了奇怪的阴影。为什么会这样以及在何处解决此问题？

// 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

React.js 项目：

Django 项目：

Answer 1

我终于明白了...问题是导入

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

无论出于何种原因导致阴影问题。

这很好用：

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

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

SVG image shows weird shadows after compiled by React.js

javascript

reactjs

svg