Перемещать svg элемент с помощью js если он создается после нажатия на определенную область?

Question

Всем доброго времени суток! Есть такая интересная задача:Я задаю svg элементу перемещение(draganddrop) но он двигается вместе с белым фоном круги создаются при щелчке мыши на этот фон. А мне нужно что бы двигался только круг

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

/*Перемещение*/

var leftArrow = 37
  , upArrow = 38
  , rightArrow = 39
  , downArrow = 40
  , panRate = 10
  , dragScale = 1
  , x, y, theSvgElement;

function mouseDown(e) {
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
  var viewBoxValues = theSvgElement.getAttribute('viewBox').split(' ');
  x = e.pageX + parseFloat(viewBoxValues[0]) * dragScale;
  y = e.pageY + parseFloat(viewBoxValues[1]) * dragScale;

}

function mouseMove(e) {
  var viewBoxValues = theSvgElement.getAttribute('viewBox').split(' ');
  viewBoxValues[0] = (x - e.pageX) / dragScale;
  viewBoxValues[1] = (y - e.pageY) / dragScale;
  theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));
}

function mouseUp(e) {
  document.removeEventListener('mousemove', mouseMove);
  document.removeEventListener('mouseup', mouseUp);

};

function initialize() {
  theSvgElement = document.getElementById('svg-id');
  document.addEventListener('mousedown', mouseDown);
  theSvgElement.setAttribute('viewBox', '0 0 ' + svgViewBoxWidth + ' ' + svgViewBoxHeight);
}

var svgViewBoxWidth = window.innerWidth
  , svgViewBoxHeight = window.innerHeight;
initialize();

body{
    background-color: #333;
}

path, circle {
  transition: 100ms;
  fill: rgba(206, 176, 176, 0.067);
  stroke: black;
}

path:hover, circle:hover {
  fill: rgba(19, 80, 4, 0.952);
}

<!DOCTYPE HTML>
<html lang="ru">

<head>
    <title>Redactor marshrutov</title>
    <meta charset="utf-8">
    <script src="jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="menu1.css">
</head>

<body>
  
  

    <svg id="svg-id">
        <rect fill="white" width="1440px" height="900px" onclick="click(event)"></rect>
    </svg>



    <script type="text/javascript" src="menu1.js"></script>

</body>

</html>

БЛОГ НА HUSL

Перемещать svg элемент с помощью js если он создается после нажатия на определенную область?

Ответы (0 шт):