SVG 以错误的颜色显示

Question

我在 React 网页中导入了一个SVG 文件。问题是显示的SVG 有一些颜色错误。

正如您在网页上看到的，有 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 有什么问题？

• 第一个 SVG 代码笔
• 第二个 SVG 代码笔
• 第三个 SVG 代码笔

Answer 1

这里有冲突的CSS规则。每个 SVG 使用<linearGradient>定义（查看<defs>部分内部），并且它们使用相同的 Id。

这些渐变被样式属性引用，如下所示：

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

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