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 在整个页面中必须是唯一的，否则引用会相互覆盖。

Answer 2

您正在使用 fill:url(#_Linear1) 规则（#_Linear1 部分）覆盖您的 fill 样式。如果您将 2 个该 SVG 放在同一个 CodePen 中，您将看到它们如何更改其 fill，因为它们是冲突的。同一个文件中有 3 个，事情变得很奇怪。

将您的 url(#_Linear1) 更改为 rgb 纯色/背景或为每个背景元素使用唯一标识符。