reactjs - React 渲染 SVG 会覆盖页面上的其他 SVG

Question

使用babel-plugin-inline-react-svg来 self 的next.js应用程序，我正在将一些 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>
);

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

无论我首先渲染哪一个 SVG，似乎都会接管所有其他 SVG。如果我输入 <EmptyCart />首先，它们都是购物车图标。但真正的问题是:当我检查 DOM 时，SVG 似乎都是正确的(它们彼此完全不同)。

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

Answer 1

查看其他 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