Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

168
Views
Get pivot cx / cy from rotation SVGMatrix

Given is an SVG element which has a rotation transformation among others.

Transformations can be iterated in JS, finding the rotation transformation by its type SVGTransform.SVG_TRANSFORM_ROTATE. The angle can be extracted using SVGTransform.angle. Everything else is encoded in SVGTransform.matrix.

How to reconstruct the rotation center offset from the transform object?

console.clear();
let r = document.querySelector('svg rect');

let transforms = r.transform.baseVal;

for(let i=0; i<transforms.length; i++)
{
  let t=transforms[i];
  if(t.type==SVGTransform.SVG_TRANSFORM_TRANSLATE)
  {
    console.log('Found translate '+t.matrix.e+', '+t.matrix.f);
  }
  else if(t.type==SVGTransform.SVG_TRANSFORM_ROTATE)
  {
    console.log('Found rotation');
    console.log(' - angle is '+t.angle); //30
    console.log(' - cx is '+'???'); //50 wanted
    console.log(' - cy is '+'???'); //25 wanted
  }
}
<svg width="300" height="200">
  <rect style="fill: blue;" width="100" height="50" transform="translate(30 30) rotate(30 50 25)" />
</svg>

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

After logging t it seems there is no straightforward way to get back cx and cy.

But we may calculate it from some equations. The center of rotation is the only point that maps to itself under a rotation (if the angle is not zero or equivalent).

If the center is located at x,y , it needs to satisfy the following equation involving matrix multiplication:

enter image description here

One can solve the two equations a*x+c*y+e=x and b*x+d*y+f=y. After some further calculations it's possible to find x and y:

console.clear();
let r = document.querySelector('svg rect');

let transforms = r.transform.baseVal;

for(let i=0; i<transforms.length; i++)
{
  let t=transforms[i];
  if(t.type==SVGTransform.SVG_TRANSFORM_TRANSLATE)
  {
    console.log('Found translate '+t.matrix.e+', '+t.matrix.f);
  }
  else if(t.type==SVGTransform.SVG_TRANSFORM_ROTATE)
  {
    console.log('Found rotation');
    let{a,b,c,d,e,f}= t.matrix ;
    let denominator =  a - a*d + b*c+d-1
    let x = ((d-1)*e-c*f)/denominator
    let y = ((a-1)*f-b*e)/denominator
    console.log(t, 'angle' in t )
    console.log(' - angle is '+t.angle); //30
    console.log(' - cx is '+ x); // 50.00000000000001
    console.log(' - cy is '+ y); // 25.000000000000004 
  }
}
<svg width="300" height="200">
  <rect style="fill: blue;" width="100" height="50" transform="translate(30 30) rotate(30 50 25)" />
</svg>

As you can see, while the results are really close to the original, it can't exactly recover the input. But then you probably have no more than 4 decimal places in the input, you may want to use something like +cx.toFixed(4).

Also, if the angle is 0 or other multiples of 360 degrees, the center cannot be recovered, as such rotation is just identity matrix, any center gives the same results. Depending on your use case, it might be better to save the data about cx, cy etc. somewhere and write to the rectangle based on that, rather than getting the transforms from the rectangle and trying to recover them.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!