search

whitesoup12 / remote-falcon

Remote Falcon Monorepo for all things RF
GNU General Public License v3.0
12 stars 5 forks source link

SVG camelCase tags are being overridden preventing proper display. #64

Closed morelup closed 10 months ago

morelup commented 10 months ago

Your Show Name: Adding your show name helps in reproducing the bug. rosedrivelights

Describe the bug: A clear and concise description of what the bug is. SVG camelcase not being maintained.

To Reproduce: Steps to reproduce the behavior: Go to https://rosedrivelights.remotefalcon.com/remote-falcon and copy the svg image Note the defs tag has a child tag lineargradient, this should be linearGradient (based on the value recieved from viewerPageContents) Past this SVG in the body of a new show and see that the SVG fill works correclty in the WYSWYG view but not in the actual show

Expected behavior: A clear and concise description of what you expected to happen. linearGraident tag should not be changed to lineargradient

Screenshots: If applicable, add screenshots to help explain your problem. image image

Desktop (if issue is seen on desktop, otherwise N/A):

whitesoup12 commented 10 months ago

This one might be difficult to solve for. The reason why is because JSX (the tags used in ReactJS), do not support camelCase elements. So when you put linearGradient, React is converting it to lineargradient, which is what React has to have but unfortunately doesn't work with SVGs. Your workaround here would be to just convert the SVG to PNG (or similar) and either host the image somewhere or use base64 image encoding.

whitesoup12 commented 10 months ago

Closing as wontfix since there is not a solution to this within RF.