Problems showing SVG image inside widgetdiv

[Santiago Hitta]

Hello, I am trying to create a custom field similar to the ones used by Dash robot, where when clicked they open a popup with an SVG image that let's the user configure the inputs of the field graphically (you can see in the first 5 seconds of the video): https://youtu.be/U49wCR8XTLU?t=109

I created a custom field that opens a widgetdiv when clicked, the idea is that this popup shows me an SVG image on the left side div. Right now when the widgetdiv pops up the image is not visible but if I inspect the HTML code and edit the <svg> tag, just adding an irrelevant whitespace anywhere, after saving the changes the svg image appears...

Video of the problem: https://www.youtube.com/watch?v=Sb_CYjBxeeQ

I've been trying to figure this out for hours now, any ideas on what could be going on? It doesn't make a lot of sense to me...

Thanks in advance!
Santiago.

[Santiago Hitta]

By the way, after that if I remove the space that I added it still shows the image..

[Aaron Dodson]

This is purely speculation, but maybe try adding xmlns="http://www.w3.org/2000/svg" to the <svg> element? I see a few reports of folks having trouble loading SVGs that lack that.

[Santiago Hitta]

Thanks.

Just tried it and it didn't change anything...

There must be something going on behind the scenes when I add a blankspace to the html, maybe the browser does something that I am not aware of... There must be something because after re-editing the svg element and eliminating the blankspace I can still see the image so the blankspace itself does nothing... something has to have changed when I edit the html, I just don't know what... Maybe some mechanics I am unaware of when editing an html document...

[Santiago Hitta]

I found Mozilla documentation that might explain what is going on (the part that says " Whitespace-only text nodes" ): https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML

Apparently the browser adds a text node when I add a whitespace, and then when I remove it I guess that the text node is not removed and hence why the HTML document seems to be the same but actually the DOM changed.. Now I need to find out why this text node is making the difference by making the image visible.