Здравствуйте, мне нужен круг, который создается, когда вы нажимаете на свободную область, чтобы иметь возможность свободно перемещаться по всей странице при нажатии клавиши Shift + левая кнопка мыши.
Проще говоря, мне нужно иметь возможность чтобы переместить этот круг по всей области страницы, удерживая нажатой клавишу Shift + левую кнопку мыши.
Прежде чем пытаться ответить, запустите код и щелкните пустую область.
let svg = document.querySelector("svg")
let bg = document.querySelector("svg rect")
function click(e) {
svg.innerHTML += `
<g transform="translate(${e.clientX},${e.clientY})">
<circle onclick="split(this)" r="50"></circle>
</g>
`;
}
function split(el){
el.parentNode.innerHTML = [...Array(4)].map((_,i) => `
<path d="M-50,0A50,50,0,0,0,0,50L0,0z"
onclick=merge(this)
transform="rotate(${-45+i*90})"></path>
`);
}
function merge(el){
el.parentNode.innerHTML = `<circle onclick="split(this)" r="50"></circle>`;
}
function resize() {
svg.setAttribute("viewBox", [0, 0, innerWidth, innerHeight]);
}
resize();
addEventListener("resize", resize);
body{
margin: 0;
overflow: hidden
}
path, circle {
transition: 100ms;
fill: #0001;
stroke: black;
}
path:hover, circle:hover {
fill: rgba(15, 250, 113, 0.133);
}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Redactor marshrutov</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<body>
<svg>
<rect fill="white" width="1440" height="900" onclick="click(event)"></rect>
</svg>
<script type="text/javascript" src="menu1.js"></script>
</body>
</html>