小编Ham*_*med的帖子

语境

我有一个 SVG，它在同一页面上被两个不同的 React 组件（A 和 B）使用。

问题

当组件 A 被分配 'display: none' css 属性时，组件 B 中的 svg 无法正确呈现。

例子

componentA {
 display: none;
}
componentB {
 display: block;
}

SVG 无法正确呈现

componentA {
 display: block;
}
componentB {
 display: block;
}

SVG 正确呈现

我怀疑这可能是我的 svg 的问题，但我不确定，因为我是新手。下面是svg代码。

<svg
  id={id}
  data-name={id}
  xmlns="http://www.w3.org/2000/svg"
  width={width}
  height={height}
  viewBox="0 0 498 305.84">
  <defs>
    <clipPath id="clip-path">
      <path
        fill="none"
        d="M354.47 137.84c1.75-22.18-9.65-52.24-34-73.15-15.94 51.41 30.59 56.14 34 73.15" />
    </clipPath>
    <linearGradient
      id="linear-gradient"
      x1="-146.72"
      y1="416.08"
      x2="-143.8"
      y2="416.08"
      gradientTransform="matrix(7.8 0 0 …