Можно ли установить координаты объекта SVG как переменную переменную, используя JavaScript? - PullRequest
Новая
       26

Можно ли установить координаты объекта SVG как переменную переменную, используя JavaScript?

2 голосов
/ 05 мая 2019

Я создаю svg с использованием HTML и JavaSCript и хочу добавить в него несколько новых объектов svg на основе функции onclick. И мне интересно, можно ли установить новые координаты 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 на основе клика в определенном месте. Это вообще возможно сделать так?

1 Ответ

1 голос
/ 05 мая 2019

Кажется, работает, если вы исправите ошибки в скрипте, т.е.

  • вам нужно передать 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>
...