I have an SVG DOM Element Object that I would like to manage using the Svelte syntax (for example, adding a class). That Element only exists in memory, in the sense that it’s not appended to the body, therefore it is not visible on the page.
<script>
// Create an SVG element
let mySvg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
mySvg1.setAttribute("width", "100");
mySvg1.setAttribute("height", "100");
// Create a circle element
let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "red");
// Append the circle to the SVG element
mySvg1.appendChild(circle);
console.log(mySvg1);
</script>
<style>
#myThing {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
I tried binding it like this
<svg id="myThing" bind:this={mySvg1}></svg>
But nothing appears on the page, and the SVG Element is not visible to the inspector.
Appending it to the body using document.body.appendChild(mySvg1) isn’t a fix , because this creates a second SVG, that doesn’t have the same content as the first.
The red circle doesn’t show up INSIDE the blue square, which means the SVG with ID “myThing” isn’t bound with the mySvg1 DOM Element.
Reminder that you can copy and paste my code on Svelte’s repl https://svelte.dev/repl
So I end up with two SVGs Element instead of one, what can I do about it?
