React.js: SVG is not being displayed properly in Chrome/Brave/Edge-CodePudding

The

CodePudding user response：

Chromium-based browsers seem to show different compliance to XML syntax from Firefox. Actually, colons : should be avoided in svg ids. In the source code of your svg, you can see a colon in your id like:

id="paint0_linear_70:301"

The colon causes the rendering issue in Chromium-based browsers. You can simply remove all these colons to solve the problem. Make sure you comply to the XML document, and don't forget to make the same modification with the code referring to this id like:

fill="url(#paint0_linear_70:301)"

For more information of svg id, you can read this doc and this thread.