时间戳

首页 > 解决方案 > 是否可以使用 JavaScript 将 SVG 对象坐标设置为可变变量？

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

问题描述

我正在使用 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);
    }
}

我想在特定位置可视化新绘制的基于 onclick 的 SVG。这甚至可以这样做吗？

标签： javascriptvariablessvgpositioning

解决方案

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

  • 您需要将 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>

推荐阅读