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

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

javascript variables svg

是否可以使用JavaScript将SVG对象坐标设置为可变变量？,javascript,variables,svg,positioning,Javascript,Variables,Svg,Positioning,我正在使用HTML和JavaSCript创建svg，并希望基于onclick函数向其中添加一些新的svg对象。我想知道是否有可能将新SVG的坐标设置为一个变化的变量。我的想法是这样的： HTML 我想将新绘制的基于onclick的SVG可视化到特定位置。这样做可能吗？如果您修复脚本中的错误，例如您需要将CX和CY传递给drawImage 你需要打电话给addCircle 您可以直接使用CX和CY window.onclick=函数（事件）{ const CX=event.pageX；

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

HTML

我想将新绘制的基于onclick的SVG可视化到特定位置。这样做可能吗？

如果您修复脚本中的错误，例如

您需要将CX和CY传递给drawImage
你需要打电话给addCircle
您可以直接使用CX和CY

window.onclick=函数（事件）{
const CX=event.pageX；
const CY=event.pageY；
drawImage（CX，CY）；
}
函数drawImage（CX、CY）{
设coordX=CX；
让coordY=CY；
函数addCircle（）{
const circle=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
circle.setAttribute（“cx”，coordX）；
circle.setAttribute（“cy”，coordY）；
圆.setAttribute（“r”、“45”）；
circle.setAttribute（“笔划”、“蓝色”）；
circle.setAttribute（“笔划宽度”、“10”）；
circle.setAttribute（“fill”和“#FCF8C4”）；
document.getElementById（“board”）.appendChild（圆圈）；
}
addCircle（）；
}

问题出在哪里？好吧，

圆圈

不会在SVG上呈现onclick。我不知道我是否能做到这一点（appendChiid）或者问题出在其他地方。Wodnerful，非常感谢Robert，您的解决方案似乎有效。或者在我的示例答案中可能有效，但问题似乎有其他被省略的东西，而不是OP想要调用的drawImage。

<!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>

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);
    }
}