React SVGR 渲染 svg 不正确答案

【问题标题】：React SVGR renders svg incorrectlyReact SVGR 渲染 svg 不正确
【发布时间】：2021-10-29 03:32:30
【问题描述】：

我正在尝试在我的 react 应用上渲染 2 个 SVG 文件。

这里：

但是当将其作为组件导入 React 时：

import { ReactComponent as ClosedEnvelope } from "../../close.svg";
import { ReactComponent as OpenEnvelope } from "../../open.svg";

const Envelope = ({closed) => {
  return (
    <div>
      {closed ? <ClosedEnvelope /> : <OpenEnvelope />}      
    </div>
  );
};

它不正确地渲染 SVG：

如您所见，左下角的“箭头”已溢出。

我使用的方法似乎存在问题，因为将 SVG 作为图像加载确实有效。

问题可能是什么？提前致谢

以下是 SVG 文件的链接： Close envelope Github Open envelope Github

【问题讨论】：

您好，您可以获取在浏览器 DOM 中显示的包含 SVG 图像的代码吗？或者，您可能实际上不必导入 svg，只需使用
@Chris 你指的是哪个代码？你想要 SVG 代码吗？
我在 Github 上看过代码。我想它是用 Illustrator 或其他一些矢量绘图软件制作的。我必须告诉你，画这个的人不是专业人士。您拥有的 svg 充满了无用的形状。更重要的是，一些路径有紧密的扭结，可能会产生你所拥有的“箭头”。请尝试以下操作：注释掉一些可能导致问题的路径：第二条路径，以M967.4,481.6L960,487 开头的路径如果箭头消失请告诉我。如果不尝试注释掉以M1381.5,843.1c-5.2,0.4-10.4,0.5-14.7,0.5开头的路径
如果箭头消失，请告诉我。如果是这样，我会给你 path d 属性来代替。
我同意 enxaneta，svg 代码真的很混乱。尝试将“d”字符串中的一些相对命令更改为绝对命令，反之亦然，它可能会起作用。为此，只需将字母从小写更改为大写等。您也可以将代码发布到打开的信封中吗？

标签： javascript reactjs svg webpack svg-react-loader

【解决方案1】：

嗯，显然这 2 个 SVG 文件具有相同的类和 ID，这导致它们发生了一些变化。

如果你有同样的问题，

更改一个 SVG 文件中的所有类。
更改所有 ID，同样在 CSS 中，如 clip-path: URL(#SOME_ID)

这对我有用。

【讨论】：