Mouse drawing and resizing path

Question

I am trying to rotate an SVG path with the mouse. Fiddle But I have few problems with this,

• The origin of the rotation is incorrect.
• When I stop spinning and spin again, it starts from a different starting angle instead of starting from the previous corner.
• Not sure how to update circle position after rotation.

The code is here:

 var svgns = 'http://www.w3.org/2000/svg'; var path = document.getElementById('path-element'); var angle = 0; function getRotationPoint() { var bRect = path.getBoundingClientRect(); var rotationPoint = [bRect.left + (bRect.width / 2), bRect.top - 20]; return rotationPoint; } var rotationPoint = getRotationPoint(); var circle = document.createElementNS(svgns, 'circle'); circle.setAttribute('style', 'fill: #DCDCDC; stroke: red; stroke-width: 2; pointer-events: visiblePainted'); circle.setAttribute('cx', rotationPoint[0]); circle.setAttribute('cy', rotationPoint[1]); circle.setAttribute('r', 4); document.querySelector('svg').appendChild(circle); var mousedown = false, mouse_start = null; circle.addEventListener('mousedown', function(event) { mousedown = true; initial_position = getRotationPoint(); mouse_start = { x: event.clientX, y: event.clientY }; }); document.addEventListener('mousemove', function(event) { if (mousedown) { var x = event.clientX, y = event.clientY; var _angle = Math.atan2(y - mouse_start.y, x - mouse_start.x) * 180 / Math.PI; var transform = "rotate(" + _angle + "," + rotationPoint[0] + "," + rotationPoint[1] + ")"; path.setAttribute('transform', transform); } }); document.addEventListener('mouseup', function(event) { mousedown = false; }); 

Please let me know if you need any other information.

 var svgns = 'http://www.w3.org/2000/svg'; var path = document.getElementById('path-element'); var angle = 0; function getRotationPoint() { var bRect = path.getBoundingClientRect(); var rotationPoint = [bRect.left + (bRect.width / 2), bRect.top - 20]; return rotationPoint; } var rotationPoint = getRotationPoint(); circle = document.createElementNS(svgns, 'circle'); circle.setAttribute('style', 'fill: #DCDCDC; stroke: red; stroke-width: 2; pointer-events: visiblePainted'); circle.setAttribute('cx', rotationPoint[0]); circle.setAttribute('cy', rotationPoint[1]); circle.setAttribute('r', 4); document.querySelector('svg').appendChild(circle); var mousedown = false, mouse_start = null; circle.addEventListener('mousedown', function(event) { mousedown = true; initial_position = getRotationPoint(); mouse_start = { x: event.clientX, y: event.clientY }; }); document.addEventListener('mousemove', function(event) { if (mousedown) { var x = event.clientX, y = event.clientY; var _angle = Math.atan2(y - mouse_start.y, x - mouse_start.x) * 180 / Math.PI; var transform = "rotate(" + _angle + "," + rotationPoint[0] + "," + rotationPoint[1] + ")"; path.setAttribute('transform', transform); } }); document.addEventListener('mouseup', function(event) { mousedown = false; }); 

 html, body { height: 100%; width: 100%; margin: 0px; } 

 <svg class="design-review-container" version="1.1" baseProfile="full" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none"> <path id="path-element" style="fill: none; stroke: rgb(33, 150, 243); stroke-width: 3; pointer-events: visiblePainted; transform-origin: 50% 50%;" d="M109,100 C110.33333333333333,98.33333333333333,112.66666666666667,92,117,90 C121.33333333333333,88,128.83333333333334,82.83333333333333,135,88 C141.16666666666666,93.16666666666667,145,111.5,154,121 C163,130.5,177.83333333333334,140.5,189,145 C200.16666666666666,149.5,214,149.66666666666666,221,148 C228,146.33333333333334,229.33333333333334,137.16666666666666,231,135"></path> </svg> 

Answer 1

The reason your center is wrong is because you are using getBoundingClientRect() . This returns the location of the path on the page. Not in SVG. When you take these rectangular coordinates and use them to position your new <circle> , it gets into the wrong place. This is because the SVG is not located in the top left corner of the page.

You must use getBBox() to get the bounds of the path in SVG coordinates.

However, if you do this, you will also need to convert the mouse coordinates to SVG coordinates. Otherwise, your rotational drag and drop will not work properly.

See this SO question for how to convert mouse coordinates to SVG coordinates.