search

TroyAlford / react-jsx-parser

A React component which can parse JSX and output rendered React Components.
MIT License
627 stars 100 forks source link

jsx code of svg render inaccurately #262

Open YugdevEm opened 4 months ago

YugdevEm commented 4 months ago

i am working on a project where i access a svg image from the user,convert the svgcode of image to jsx in the nodejs server and show the svg image using this jsx in the front end.To do this i need to render the jsxCode inside a react component,the jsxCode is stored inside a variable.The svg image is being rendered inaccurately,the colours are inaccurate and alignment of the text elements are broken.why am i facing this issue?

i also need to make changes to the svg like adding a new path element,change colours of the path etc. Image

Do any of you know how to fix this?

TroyAlford commented 3 months ago

@YugdevEm I can't give you any advice, there, without seeing the content of your SVG. My guess, however, is that SVG has a set of elements within it that React may not like without alteration. Specifically, this could include namespaces inside the tag names, casing in tags, or things spelled via kebab-case rather than camelCase or PascalCase which React expects.

If you get any errors in your console, I'd suggest starting there. You're also welcome to post the text of your SVG here, if you wish -- I may be able to spot something there.