Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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)

Issue Analytics

State:
Created 5 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

4reactions

jlongstercommented, Mar 14, 2019

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

3reactions

Shenlokcommented, Mar 14, 2019

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

Top Results From Across the Web

svg not rendering correctly when used with by multiple react ...

I had a simple workaround that worked for me at least. The only change I would do is append the unique id to...

SVG Properties and CSS

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex.

Styling — SVG 2

Styling properties define how the graphics elements in the SVG content are to be rendered. SVG uses styling properties for the following:.

Must-know SVG Concepts for Web Developers - Zach Gollwitzer

You can see we are defining via defs a "group" ( g ) of SVG elements, which does not render the elements to...

view · WebPlatform Docs

<title>The SVG view Element</title> <desc> The key concept is that the 'viewBox' attribute values of the associated 'view' element are essentially applied ...