I recently encountered a unique challenge with my SVG element, which acts as a container for a chessboard I developed. In certain key moments of the game, such as when a pawn is promoted and a player needs to choose a new piece, I found it necessary to have an interactive component pop up. The catch is that this component cannot be stored as a child of the chessboard container because the chessboard must remain disabled while the player makes their selection. As a solution, I decided to create an IMG element containing all the selectable pieces. By overlaying the IMG element on top of the SVG element using position:absolute and top/left properties, I was able to achieve the desired functionality. Additionally, I attached an eventListener to the document itself, disabling the listener once the player has made their selection. If there are no bugs in my code, is this approach viable?
Below is a simplified version of the code, albeit one that does not work:
Imagine the blue square represents the chess board:
<html>
<body>
<h1>The img element</h1>
<svg id = "cont" width = "500" height = "600">
<rect width = "500" height = "600" style = "fill:blue">
</svg>
<script>
var im = document.createElement("img");
im.src = "img_girl.jpg";
im.width = "250";
im.height = "300;
im.style = "position: absolute; top: 100px; left: 100px";
document.body.appendChild(im);
</script>
</body>
</html>