19

babel-plugin-inline-react-svg在我的应用程序中使用next.js，我将一些 SVG 导入到我的 Reactv16.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>
);

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

重复的 SVG

我首先渲染的 SVG 中的任何一个似乎都接管了所有其他的。如果我把<EmptyCart />它们放在第一位，它们都将是购物车图标。但真正的问题是：当我检查 DOM 时，SVG 似乎都是正确的（它们彼此完全不同）。

有人见过这个吗？这怎么可能让 DOM 说一件事而浏览器渲染另一件事呢？

4

8 回答 8

24

查看其他 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 在 SVG 本身中被定位和重用：

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

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

如果有帮助，我创建了一个代码笔，其中包含更多关于如何重用 svg 的示例：https ://codepen.io/peter-mouland/pen/JErvZY

于 2017-12-28T15:06:30.513 回答
4

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

svg 生成器通常可以返回具有相同 Id 的内容<mask id="mask0" />，然后由<g mask="url(#mask0)"/>.

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

最简单的解决方案是为每个指定一个唯一的 id <mask />，然后不要忘记更新<g />.

于 2019-04-25T09:54:55.433 回答
4

您应该为配置文件中的每个 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,
  },
于 2018-05-23T07:58:06.490 回答
2

就我而言，两个 SVG 之间的冲突是因为它们在内部具有相同的 .className

两种解决方案：

  • 更改其中之一的实习生班级名称

  • 如果可能（例如，如果您使用 CRA）加载其中一个 svg 使用<img src'file.svg'>

于 2020-01-31T20:01:04.277 回答
2

我也遇到了类似的问题，因为我从 Figma 导出了图像，并且在项目中使用它们。

因此，每次我将另一个 SVG 作为组件包含时，它都会覆盖其中一个 SVG 并显示第一个。

经过仔细检查，我注意到它们实际上具有相同的 id 和相同的图像名称

在我的情况下，让填充属性指向pattern45550我的新 svg 名称

<rect width="48" height="52" fill="url(#pattern45550)"/>

将 id 重命名为pattern45550

<pattern id="pattern45550" patternContentUnits="objectBoundingBox" width="1" height="1">

image10000000在下面的标签中重命名图像名称

<image id="image10000000" width="2887" height="3162" xlink:href="data:image/png;base64...

然后最后将 URL 指向image10000000图像

<use xlink:href="#image10000000" transform="translate(0 -0.00550212) scale(0.00034638)"/>

就我而言，这一切都很好。

于 2021-08-03T19:19:46.433 回答
1

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


<svg>
   <defs>
        <style>.a{fill:none;}</style>
   </defs>
</svg>

在这里，我们定义了一个类名样式.a，在我的项目中，所有 svgs 都使用相同的类名，如果我在 DOM 中使用多个 SVG，那么我的 svgs 样式将被覆盖并破坏设计

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

于 2021-01-31T10:47:58.157 回答
1

当我尝试使用从屏幕上的 figma 文件下载的多个 svg 时遇到此问题，另一个 svg 覆盖另一个。问题是每个 svg 中的类名相似。所以我编辑了类名以防止它们发生冲突

于 2022-01-17T13:33:57.690 回答
0

问题很可能是 SVG 之间的 ID 不是唯一的，如上所述。有一些加载器可以自动为您处理此问题，因此您不必手动更改所有 ID 和对它们的引用。看看这个：https ://github.com/SilverFox70/svg-react-loader

于 2018-08-21T19:14:50.407 回答