React: `stopColor` property of the `stop` SVG element not properly rendered

[jlongster]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

If you render two SVG elements that have a stop element with a stopColor property that is passed in from props, it uses the same color for both elements even though they are different.

Example: https://codesandbox.io/s/qookw7v34

What is the expected behavior?

There should be a black and a white SVG element. The stopColor should reflect whatever prop I passed in.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.8.4 (tested in Firefox and Chrome)

[bvaughn]

The sandbox you linked to seems to work for me in Chrome (72.0.3626.119) and Firefox (65.0.1).

Edit I believe I misunderstood the report to suggest that only the cap should be colored, rather than the entire arc.

[aweary]

Hey @jlongster! In addition to Firefox and Chrome I tested this in iOS Safari and it seemed to work correctly. I can also reproduce the same behavior using just regular HTML.

This indicates that it's not a problem with React and may be a browser inconsistency.

[bvaughn]

Can confirm what @aweary says. This doesn't look to be React specific.

[Shenlok]

The issue is with using the same id for the <linearGradient> across both SVGs

[jlongster]

Came here to close this, y'all are indeed right, thanks!

[bvaughn]

Good eye, @Shenlok

https://codesandbox.io/s/l7mow9223m