【发布时间】：2021-06-20 18:41:15
【问题描述】：
我有一个带有 linearGradient 的 svg react 组件，我在我的 Header 组件和我的主要组件中呈现。当我将 display: none 样式设置为 Header 组件时，我希望 Header 组件中的 svg 是隐藏的，而主组件中的 svg 是可见的。当我在没有linearGradient的情况下使用svg时，我得到了隐藏在Header中并在主组件中可见的svg的预期行为。但是，如果svg使用linearGradient，那么将display: none设置为Header会隐藏Header和主组件中的svg。
为了重现该问题，我有 2 个反应组件 PythonIcon（使用线性渐变）和 WebpackIcon（不使用线性渐变）。在我的 App.js 中，我渲染了 Header 并在我的主要组件中同时渲染了 PythonIcon 和 WebpackIcon：
import React from "react";
import Header from "./Header";
import PythonIcon from "./PythonIcon";
import WebpackIcon from "./WebpackIcon";
function App() {
return (
<div>
<Header />
<main style={{ marginTop: "1rem", border: "1px solid green" }}>
<h1>
<PythonIcon width="20" height="20" />
Python
</h1>
<h1>
<WebpackIcon width="20" height="20" />
Webpack
</h1>
</main>
</div>
);
}
export default App;
在我的 Header 组件中，我还渲染了 PythonIcon 和 WebpackIcon
import React from "react";
import PythonIcon from "./PythonIcon";
import WebpackIcon from "./WebpackIcon";
export default function Header() {
return (
<header style={{ border: "1px solid red", display: "block" }}>
<h1>
<PythonIcon width="20" height="20" />
Python
</h1>
<h1>
<WebpackIcon width="20" height="20" />
Webpack
</h1>
</header>
);
}
页面看起来像这样：
但是一旦我在 Header 组件中将 display: block 更改为 display: none，页面看起来像这样：
请注意，webpack 图标（不使用 linearGradient）正确显示在主组件中，但 python 图标（使用 linearGradient）没有。
这是出乎意料的。难道我做错了什么？有没有办法隐藏标题中的python图标而不隐藏主要组件中的python图标？我正在尝试使用 css media-query 创建一个响应式导航栏来显示/隐藏导航栏。不幸的是，隐藏带有 svg 图标的导航栏也会在我渲染的其他组件中隐藏 svg 图标。
我在https://github.com/kimbaudi/react-svg-lineargradient-issue提供了一个最小的复制品
【问题讨论】：
-
我想我知道为什么会遇到这个问题。这可能是因为在 svg 中使用 linearGradient 需要 id，因此使用 linearGradient 渲染多个 svg 将渲染具有相同 id 的多个元素。我需要看看是否将唯一 id 作为道具传递给带有 linearGradient 的 svgs 解决了这个问题。
-
不要显示：无。尝试 svg 元素的宽度和高度 0。您可以添加 position:absolute 并将其扔出窗口
left