使用颜色作为道具反应 SVG 组件

Question

我对 SVG 有一个奇怪的问题。 我用 svg 代码做了两个不同的组件，可以用道具改变颜色。现在，当我调用两个组件时，它们具有相同的颜色，具体取决于调用顺序。 起初我以为这是因为道具具有相同的“名称”但没有。我尝试包装这些组件以将它们分开，但也不起作用。

我在这里做了简化版： https://codesandbox.io/s/svg-triangle-with-colos-as-prop-njmy7?fontsize=14&hidenavigation=1&theme=dark

还有一件事。如果您检查这些 svg，它们有不同的颜色。我真的不知道这是怎么回事。

您好，谢谢。

Answer 1

https://codesandbox.io/s/svg-triangle-with-colos-as-prop-0k8yw

我认为这是因为您定义了两个具有相同 ID 的 linearGradients，并在每个三角形中引用了相同的 ID。

您可能希望提取一个生成唯一 ID（可能只是一个计数器）的组件，您可以引用该组件，或者以某种方式为具有 ID 的所有内容（例如过滤器）生成一个唯一 ID。