Как создать новый SVG-прямоугольник без отмены предыдущего

Question

Когда я щелкаю где-нибудь в svg, создается прямоугольник svg. Работает нормально. Но если я щелкну где-нибудь еще раз, то предыдущий созданный прямоугольник svg будет перезаписан.

Ожидаемое поведение: каждый щелчок должен создавать новый прямоугольник svg без перезаписи предыдущего прямоугольника.

Есть ли у вас какие-либо предложения реализовать ожидаемое поведение?

    window.onload = setup;

    const svgcanvas = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

    function setup() {
        svgcanvas.setAttribute("width", 600);
        svgcanvas.setAttribute("height", 600);
        svgcanvas.setAttribute("id", "column");
        svgcanvas.setAttribute("style", "background-color: grey;");
        svgcanvas.setAttribute("onclick", "handleClick()");

        document.body.appendChild(svgcanvas);

    }

    let y = 0;
    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    let myTarget = 500;

    const handleClick = () => {
        rect.setAttribute("width", 100);
        rect.setAttribute("height", 100);
        rect.setAttribute("x", 100);
        rect.setAttribute("y", -50);
        rect.setAttribute("style", "fill: pink;");
        svgcanvas.appendChild(rect);
        y = y + 100;
        myTarget = myTarget -100;

        intervalId = setInterval(moveMyRect, 10);
    };

    const moveMyRect = () => {
        let rectCurrentYPosition = parseInt(rect.getAttribute("y"));
        if (rectCurrentYPosition === myTarget) {
            clearInterval(intervalId);
        }

        rectCurrentYPosition = rectCurrentYPosition + 1;

        rect.setAttribute("y", rectCurrentYPosition);
    };

Answer 1

Я только что решил. Как? Просто передайте прямоугольник функции moveMyRect. Вот код, который у меня есть. Надеюсь, это кому-то поможет.

    let y = 0;

    let myTarget = 500;

    const handleClick = () => {
        const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("width", 100);
        rect.setAttribute("height", 100);
        rect.setAttribute("x", 100);
        rect.setAttribute("y", -50);
        rect.setAttribute("style", "fill: pink;");
        svgcanvas.appendChild(rect);
        y = y + 100;
        myTarget = myTarget -100;

        intervalId = setInterval(moveMyRect, 10, rect);
    };

    const moveMyRect = (theRect) => {
        let discCurrentYPosition = parseInt(theRect.getAttribute("y"));
        if (discCurrentYPosition === myTarget) {
            clearInterval(intervalId);
        }

        discCurrentYPosition = discCurrentYPosition + 1;

        theRect.setAttribute("y", discCurrentYPosition);
    };