是否可以使用 JavaScript 将 SVG 对象坐标设置为变化的变量？

Question

我正在使用 HTML 和 JavaSCript 创建 svg，我想根据 onclick 函数向其中添加一些新的 svg 对象。我想知道是否可以将新的 SVG 坐标设置为变化的变量。我的想法是这样的：

HTML

<!DOCTYPE html>
<html>
    <body>
        <svg id="board" width="360" height="360">
            <rect x="10" y="10" width="100" height="100"/>
            <rect x="130" y="10" width="100" height="100"/>
            <rect x="250" y="10" width="100" height="100"/>

            <rect x="10" y="130" width="100" height="100"/>
            <rect x="130" y="130" width="100" height="100"/>
            <rect x="250" y="130" width="100" height="100"/>

            <rect x="10" y="250" width="100" height="100"/>
            <rect x="130" y="250" width="100" height="100"/>
            <rect x="250" y="250" width="100" height="100"/>
        </svg>
    </body>

JS

window.onclick = function(event){
    const CX = event.pageX;
    const CY = event.pageY;
    [...]
        
    drawImage();
}

[...]

function drawImage(){

    let coordX = CX/(360/3);         //360 is a size of the SVG object
    let coordY = CY/(360/3);

    function addCircle(){
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("cx", coordX);
        circle.setAttribute("cy", coordY);
        circle.setAttribute("r", "45");
        circle.setAttribute("stroke", "blue");
        circle.setAttribute("stroke-width", "10");
        circle.setAttribute("fill", "#FCF8C4");

        document.getElementById("board").appendChild(circle);
    }
}

我想根据特定位置的点击来可视化新绘制的 SVG。这甚至可以这样做吗？

Answer 1

如果您修复脚本中的错误，似乎可以工作，即

你需要将CX和CY传递给drawImage
你需要实际调用 addCircle
你可以直接使用CX和CY

window.onclick = function(event){
                const CX = event.pageX;
                const CY = event.pageY;


        drawImage(CX, CY);
        }

function drawImage(CX, CY){

    let coordX = CX;
    let coordY = CY;

        function addCircle(){

            const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            circle.setAttribute("cx", coordX);
            circle.setAttribute("cy", coordY);
            circle.setAttribute("r", "45");
            circle.setAttribute("stroke", "blue");
            circle.setAttribute("stroke-width", "10");
            circle.setAttribute("fill", "#FCF8C4");

            document.getElementById("board").appendChild(circle);
        }
        addCircle();
    }

<!DOCTYPE html>
<html>
    <body>
        <svg id="board" width="360" height="360">
            <rect x="10" y="10" width="100" height="100"/>
            <rect x="130" y="10" width="100" height="100"/>
            <rect x="250" y="10" width="100" height="100"/>

            <rect x="10" y="130" width="100" height="100"/>
            <rect x="130" y="130" width="100" height="100"/>
            <rect x="250" y="130" width="100" height="100"/>

            <rect x="10" y="250" width="100" height="100"/>
            <rect x="130" y="250" width="100" height="100"/>
            <rect x="250" y="250" width="100" height="100"/>
        </svg>
    </body>

是否可以使用 JavaScript 将 SVG 对象坐标设置为变化的变量？

Is it possible to set SVG object coordinates as a changing variable using JavaScript?

javascript

variables

svg

positioning

HTML

JS