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

Question

使用babel-plugin-inline-react-svg从我内next.js的应用程序，我进口一些SVGs到我的阵营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

Answer 2

该问题可能与 SVG 中的非唯一 id 有关。

svg 生成器通常可以返回具有相同 Id 的内容，就像<mask id="mask0" />then 所引用的那样<g mask="url(#mask0)"/>。

如果您有两个具有相同蒙版 ID 的不同 SVG，则在渲染两个不同图标时可能会出现问题。

最简单的解决方案是为每个指定一个唯一的 id <mask />，然后不要忘记更新 中的引用<g />。

Answer 3

我也遇到了类似的问题，因为我从 Figma 导出图像并在项目中使用它们。

因此，每次我将另一个 SVG 包含为组件时，它都会覆盖其中一个 SVG 并显示第一个。

仔细检查后，我发现它们实际上具有相同的 id 和相同的图像名称

让 fill 属性指向pattern45550我的新 svg 名称

<rect width="48" height="52" fill="url(#pattern45550)"/>

将id重命名为pattern45550

<pattern id="pattern45550" patternContentUnits="objectBoundingBox" width="1" height="1">

image10000000也在下面的标签中重命名图像名称

<image id="image10000000" width="2887" height="3162" xlink:href="data:image/png;base64...

然后最后将 URL 指向image10000000图像

<use xlink:href="#image10000000" transform="translate(0 -0.00550212) scale(0.00034638)"/>

对我来说这一切都很顺利。