svg 与多个反应组件一起使用时无法正确呈现答案

【问题标题】：svg not rendering correctly when used with by multiple react componentssvg 与多个反应组件一起使用时无法正确呈现
【发布时间】：2018-01-18 02:38:14
【问题描述】：

上下文

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

问题

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

示例

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

SVG does not render correctly

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

SVG renders correctly

我怀疑这可能是我的 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="clip-path" 这是无效的。
@RobertLongson 只有一个 id="clip-path"。 <path> 元素上的第二个仅用于引用目的。
组件 A 或组件 B 中的哪一个创建了 id="clip-path"。如果答案是两者都有，那么你就有问题了。
我也有同样的问题。我通过用js而不是css隐藏另一个svg来解决它

标签： javascript css reactjs svg

【解决方案1】：

我有一个至少对我有用的简单解决方法。

我会做的唯一改变是将唯一的 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。

【讨论】：

【解决方案2】：

到目前为止，有一个feature request in svgo 可以为每个 svg 实例唯一分配 id。

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

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

componentA {
 display: block;
 visibility: hidden;
 height: 0;
 width: 0;
}
componentB {
 display: block;
}

另一种解决方法是将唯一 id 作为porp 传递，并将其替换为clip-path 所需的id，如回答earlier。

例如

export const svg = (id) => <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 498 305.84">
  <defs>
    <clipPath id={`clip-path-&{id}`}>
      <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-${id}`}
      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-&{id})`}
      fill={`url(#linear-gradient-${id})`}
      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>

【讨论】：

引用有助于解决您的问题的内容会很有帮助。