Javascript 与多个组件一起使用时，svg无法正确呈现

上下文

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

问题

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

示例

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

我怀疑这可能是我的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 -7.8 1469.73 3349.9)"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stopColor="#62bb46" />
      <stop offset="100%" stopColor="#a2d28a" />
    </linearGradient>
  </defs>
  <g id="Leaf">
    <path
      clipPath="url(#clip-path)"
      fill="url(#linear-gradient)"
      d="M286.058 69.72l66.622-18.076 22.032 81.205-66.622 18.074z" />
    <path
      fill="#62bb46"
      d="M320.48 64.69c23.64 2.71 53.94 33.25 34 73.15 1.76-22.18-9.65-52.24-34-73.15" />
  </g>
</svg>

---

我有一个简单的解决方法，至少对我来说是有效的

我要做的唯一更改是将唯一id附加到每个具有id属性的元素中

    <svg
      id={id}
      data-name={id}
      ...
      <defs>
        <clipPath id={`clip-path-${id}`}>
          ...
        </clipPath>
        <linearGradient
          id={`linear-gradient-${id}`}
         ...
        </linearGradient>
      </defs>
      <g id={`Leaf-${id}`}>
        <path
          clipPath={`url(#clip-path-${id})`}
          fill={`url(#linear-gradient-${id})`}
          ...
         />
      </g>
    </svg>

到目前为止，每个svg实例都有一个唯一分配id的方法

最好的解决办法是不要在svg中使用剪辑路径

另一种方法是使用以下css隐藏元素


组件a{
显示：块；
可见性：隐藏；
身高：0；
宽度：0；
}
成分B{
显示：块；
}
您有多个具有相同id的元素，例如id=“clip path”这是无效的。@RobertLongson只有一个id=“clip path”。
元素上的第二个仅用于引用目的。组件A或组件B中的哪一个创建了id=“剪辑路径”。如果答案都是，你就有问题了。我也有同样的问题。我通过用js隐藏另一个svg而不是cssIt来解决这个问题。如果能引用帮助解决问题的内容，那会很有帮助。
    <svg
      id={id}
      data-name={id}
      ...
      <defs>
        <clipPath id={`clip-path-${id}`}>
          ...
        </clipPath>
        <linearGradient
          id={`linear-gradient-${id}`}
         ...
        </linearGradient>
      </defs>
      <g id={`Leaf-${id}`}>
        <path
          clipPath={`url(#clip-path-${id})`}
          fill={`url(#linear-gradient-${id})`}
          ...
         />
      </g>
    </svg>