SVG PATH Creation не создается по точному пути с использованием мышиных координат XY

Question

Я рисую путь SVG, используя координаты XY элемента и движения мыши. Путь SVG не добавляется с правильной точкой мыши.

Это мой фрагмент кода

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" >
<g><path id=""></path></g> </svg>
<script>
.
.
.
     var coord = getMousePosition(evt);
     var getpos = document.getElementById(id).getBoundingClientRect();
     var CTM = svg.getScreenCTM();
     var pathValue = "M "+getpos.x+" "+getpos.y+" "+coord.x+" "+coord.y;
     document.getElementById(id).setAttribute("d", pathValue);
.
.

</script>

.........

Answer 1

Похоже, вы пропустили команду 'L' вашего пути svg ...

let path;

addEventListener('mousedown', function(e) {
  svg.innerHTML += `<path 
      fill=none 
      stroke-width=5 
      stroke="hsl(${Math.random()*360},66%,66%)" 
      d="M${e.x},${e.y}"
  />`;
  path = svg.querySelector('path:last-child');
})

addEventListener('mouseup', function() {
  path = null;
})

addEventListener('mousemove', function(e) {
  path && path.setAttribute('d', path.getAttribute('d') + `L${e.x},${e.y}`);
})

addEventListener('resize', function() {
  svg.setAttribute('width', innerWidth);
  svg.setAttribute('height', innerHeight);
})

dispatchEvent(new Event('resize'));

body {
  margin: 0;
  overflow: hidden;
}

<svg id=svg></svg>

Нажмите «Выполнить фрагмент кода» и попробуйте нарисовать в кадре фрагмента ...