I’m working on a Svelte+Vite project with a somewhat overgrown svg display component. A function is called that constructs an svg group with a circle in it’s inner HTML. In the future the inner text will be more complex, but this is just a placeholder.
svg = document.createElement('g')
svg.innerHTML = inner
total.appendChild(svg)
total references an existing svg group using the bind:this Svelte tag.
The issue is that when appendChild is called, nothing happens.
Other functions that manipulate the svg in other ways work just fine (setAttribute, removeChild, etc.)
There is nothing wrong with the svg contents. I can verify this by navigating to the element assigned to total in the web browser. When the function is called, the svg text appears under the right element just fine. If I right click on the total element in the browser, Copy->Inner HTML, then right click again, Paste->InnerHTML, the svg renders correctly. I’m using Firefox.
I do need to use the appendChild method here because the function adds an element dynamically, so I can’t solve this just by changing the function for something else. The rest of the display works fine and does not use appendChild because it usually renders things in larger chunks, such that it wouldn’t be efficient to draw individual children like this.
I could store a list of svg strings for all of the elements under this group, then redraw them all every time the list is updated (total.innerHTML = elems.join('n')), but that’s a last resort.