У меня есть элемент SVG, который действует как контейнер для созданной мной шахматной доски. Мне нужно, чтобы интерактивный компонент появлялся во время ключевых моментов игры, например, когда пешка продвигается, и игроку нужно выбрать, какую фигуру он хочет. Я не могу сохранить этот компонент в качестве дочернего элемента контейнера для шахматной доски, потому что шахматная доска должна быть отключена, пока пользователь выбирает, какую фигуру он хочет. поэтому моим текущим решением было создать элемент IMG, содержащий все выбираемые части. Я наложил элемент IMG на элемент svg, используя свойства img position: absolute и top / left. Затем я прикрепляю eventListener к самому документу, отключая eventlistener, когда пользователь выбирает то, что ему нужно. Предполагая, что в моем коде нет ошибок, возможен ли такой подход?
Это упрощенная версия моего кода, которая также не работает:
представьте, что синий квадрат - это шахматная доска:
<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>