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有什么问题？

Answer 1

有个冲突的CSS规则。每个SVG使用<linearGradient>定义（在<defs>部分中查找），并且使用相同的ID。

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

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

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

Answer 2

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

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

SVG显示颜色错误

2 个答案: