reactjs - SVG 以错误的颜色显示

Question

我有一个 SVG file我在我的 React 网页中导入的。问题是 SVG displayed has some of its colors wrong .
正如您在网页上看到的，有 3 个 SVG。其中 2 个显示颜色错误。但第一个有原始颜色。虽然3个SVG是导入和使用方式完全相同。
在 MyPage.jsx 中，我导入它们

import Hanshake from '../images/handshake.svg';
import Logistics from '../images/logistics.svg';
import Designer from '../images/designer.svg';

然后简单地像这样使用它:

    <Col xs={24} md={8} className='about_illustration_text'>
      <Hanshake />
      Some text
    </Col>
    <Col xs={24} md={8} className='about_illustration_text'>
      <Logistics />
      Some text
    </Col>
    <Col xs={24} md={8} className='about_illustration_text'>
      <Designer />
      Some text
    </Col>

我没有发现任何 CSS 冲突。
那些 SVG 有什么问题？

First SVG codepen

2nd SVG codepen

3rd SVG codepen

Answer 1

存在冲突的 CSS 规则。每个 SVG 使用 <linearGradient>定义(查看 <defs> 部分)，并且它们使用相同的 ID。
这些渐变被样式属性引用，如下所示:

style="fill:url(#_Linear11);"

将所有SVG内容插入一页后，有多个 <linearGradient>具有相同 id 的元素作为同一 DOM 的一部分。 ID 在整个页面中必须是唯一的，否则引用将相互覆盖。