Question

30

Mouse position inside autoscaled SVG

rated 0 times [ 32] [ 2] / answers: 1 / hits: 41743 / 12 Years ago, tue, april 24, 2012, 12:00:00

I am experiencing troubles concerning the position of mouse cursor inside my SVG document. I'd like to design a potentiometer that will follow the cursor when dragged, using JavaScript in an HTML page.

I tried evt.clientX/Y and evt.screenX/Y but as my SVG is in autoscale, coordinates inside my SVG are different. I have been searching for an answer for days now but I couldn't find any solution (either knowing my SVG rescaling factor in real time or have a function for mouse location in SVG coordinates system).

The rotation will follow a simple rule:

if (evt.screenX < xc)

  ang = Math.atan((evt.screenY - yc) / (evt.screenX - xc)) * 360/(2*Math.PI) - 90;  



if (evt.screenX > xc)

  ang = Math.atan((evt.screenY - yc) / (evt.screenX - xc)) * 360/(2*Math.PI) + 90;

With (xc;yc) as center of rotation and replacing all evt.screenX/Y by the coordinates of the mouse inside my SVG.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelyn

Add To Favorites

Follow

Total Points: 619

Total Questions: 102

Total Answers: 104

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jaelyn questions

1 How to configure vue 3 router children properly to have nested routes working as expected?

Mon, Apr 11, 22, 00:00, 2 Years ago

1 The best way to pass authorization header in nextJs using Apollo client? ReferenceError: localStorage is not defined

Thu, Jul 23, 20, 00:00, 4 Years ago

1 React send multiple requests in a loop and wait

Tue, Apr 28, 20, 00:00, 4 Years ago

1 How can I change the checkbox styles and icons when hover on it in Material-UI React?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Node.js spawn: Keep StdOut and StdErr in the original order

Mon, Jul 15, 19, 00:00, 5 Years ago

View All

answered 12 Years ago oliverkarle · Accepted Answer

See this code, which not only shows how to transform from screen space to global SVG space, but also how to transform a point from SVG space into the transformed space of an element:

http://phrogz.net/svg/drag_under_transformation.xhtml

In short:

// Find your root SVG element

var svg = document.querySelector('svg');



// Create an SVGPoint for future math

var pt = svg.createSVGPoint();



// Get point in global SVG space

function cursorPoint(evt){

  pt.x = evt.clientX; pt.y = evt.clientY;

  return pt.matrixTransform(svg.getScreenCTM().inverse());

}



svg.addEventListener('mousemove',function(evt){

  var loc = cursorPoint(evt);

  // Use loc.x and loc.y here

},false);

Edit: I've created a sample tailored to your needs (albeit only in global SVG space):

http://phrogz.net/svg/rotate-to-point-at-cursor.svg

It adds the following method to the above:

function rotateElement(el,originX,originY,towardsX,towardsY){

  var angle = Math.atan2(towardsY-originY,towardsX-originX);

  var degrees = angle*180/Math.PI + 90;

  el.setAttribute(

    'transform',

    'translate('+originX+','+originY+') ' +

      'rotate('+degrees+') ' +

      'translate('+(-originX)+','+(-originY)+')'

  );

}