Reactjs React呈现SVG覆盖页面上的其他SVG

使用我的

next.js

应用程序中的

babel插件内联react svg

，我正在将一些svg导入我的react

v16.0.0

组件中

import React from 'react';
import Close from './close.svg';
import Chevron from './right.svg';
import EmptyCart from './empty.svg';

const Component = props => (
  <div>
    <Close />
    <EmptyCart />
    <Chevron />
  </div>
);

从“React”导入React；
从“/Close.svg”导入Close；
从“/right.svg”导入V形；
从“/empty.svg”导入EmptyCart；
常量组件=道具=>(
);

当我运行该代码时，页面呈现为3个SVG都相同，如下所示：

我首先呈现的SVG中的任何一个似乎都会接管所有其他SVG。如果我把

放在第一位，它们都将是购物车图标。但真正重要的是：当我检查DOM时，SVG似乎都是正确的（它们彼此完全不同）

---

有人见过这个吗？DOM怎么可能说一件事而浏览器却呈现另一件事呢？

查看其他SVG也会很有帮助，但如果它们相似且id匹配，那么这就是您的问题

    <path id="4eeded6c-befb-41ba-a055-83a9e4ddc009" d="M3.632 3.182H1.091A1.09 1.09 0 0 1 1.09 1h3.322c.467 0 .883.297 1.033.74l4.096 12.046.036.134c.083.406.53.777.928.78l8.87.056c.39.002.831-.361.925-.816l1.552-6.017a1.09 1.09 0 1 1 2.112.545l-1.539 5.96c-.285 1.417-1.625 2.518-3.064 2.51l-8.869-.057c-1.408-.008-2.718-1.073-3.036-2.451L3.632 3.182zM9.272 23a2.191 2.191 0 0 1-2.181-2.201c0-1.216.977-2.2 2.182-2.2s2.181.984 2.181 2.2A2.191 2.191 0 0 1 9.273 23zm10.91 0A2.191 2.191 0 0 1 18 20.799c0-1.216.977-2.2 2.182-2.2s2.181.984 2.181 2.2A2.191 2.191 0 0 1 20.182 23z"/>

您可以在这里看到，该id get在SVG本身中被定位和重用：

    <use xlink:href="#4eeded6c-befb-41ba-a055-83a9e4ddc009"/>

这是一个常见问题，尤其是从photoshop等应用程序导出时。为了避免使用svg时发生冲突，我手动更改所有id以确保唯一性

---

如果有帮助的话，我已经创建了一个代码笔，它将介绍如何重用svg的更多示例：

您应该为配置文件中的每个svg图标分配不同的id。像这样：

// SVG are imported as react components
  {
    test: /\.svg$/,
    use: [
      {
        loader: 'babel-loader',
      },
      {
        loader: 'react-svg-loader',
        options: {
          svgo: {
            plugins: [
              {
                removeTitle: true,
              },
              {cleanupIDs: {
                  prefix: {
                      toString() {
                          this.counter = this.counter || 0;

                          return `id-${this.counter++}`;
                      }
                  }
              }},
            ],
            floatPrecision: 3,
          },
        },
      },
    ],
    include: paths.svg,
  },

---

问题很可能是，如上所述，SVG之间的ID不是唯一的。有一些加载程序可以自动为您处理这个问题，这样您就不必手动更改所有ID和对它们的引用。请检查：

该问题可能与SVG中的非唯一ID有关

svg生成器通常可以返回具有相同ID的内容，如

，然后由

引用

如果您有两个具有相同掩码id的不同SVG，您可能会遇到渲染两个不同图标的问题

---

最简单的解决方案是为每个

指定一个唯一的id，然后不要忘记更新

中的引用。在我的例子中，两个SVG之间的冲突是因为它们在内部具有相同的.className

两种解决方案：

• 更改其中一个中的实习生类名

• 如果可能（例如，如果您正在使用CRA），请使用

---

在某些情况下，我们定义SVG的样式如下

.a{填充：无；}

这里我们将类名样式定义为

.a

，在我的项目中，所有SVG都使用相同的类名，如果我在DOM中使用多个SVG，那么我的SVG样式将被覆盖并破坏设计

---

解决方案：您应该更改类名以避免重复的类名

什么是封闭的、右边的和空的？一个

，在DOM结构中都与此类似，它们是否共享id值，即多个文件是否有id=“a”或id=“b”的元素？是的，它们似乎都有id=“a”等，这可能是一个问题吗？我不是针对那些IDS的任何东西，如果您想进一步了解，我们需要查看所有SVG文件。这在我的案例中解决了这个问题。如果您从Figma导出，您会发现您的

元素具有此匹配ID，并在整个应用程序中呈现相同的SVG。这在React之外对我来说是真实的。@s0rfi949您是如何解决您的figma问题的，我们无法在figma中找到要声明掩码的位置ids@DanielBirowskyPopeski对不起，好久不见了，我记不清了。但我认为它可以在导出选项中找到，也可以查看以下帖子：