Javascript svg将矩阵表示法转换为旋转/平移

我对计算矩阵变换（旋转/平移）有点迷茫

我将svg转换应用于svg矩形（r1）

这给了我下面的变换矩阵

SVGMatrix{a:0.8660253882408142，b:0.5，c:-0.5，d:0.8660253882408142，e:85.945556640625，f:23.887840270996094}

如果我将此变换矩阵应用于另一个矩形（r2），则该矩形将移动到与第一个矩形完全相同的位置，但在应用旋转之前，我丢失了初始x，y位置

如何从变换矩阵中获得这些x，y值

平移（x，y）旋转（a，x+rect.w，y+rect.height）

我做了一个jsbin来说明我的问题

如果你能帮忙，我将不胜感激。 谢谢。

使用这个答案

我找到了这个函数

function computePosition(m, dim, angle){  
  var rad = angle*Math.PI/180;
  var tx = m.e - dim.width/2 + Math.cos(rad)*dim.width/2 - dim.height/2*Math.sin(rad);
  var ty = m.f - dim.height/2 + dim.width/2*Math.sin(rad) + dim.height/2*Math.cos(rad);
  return {x:tx, y:ty}
}

我现在可以创建一个新的变换矩阵并应用于rect r3

var angle = 30;
var m = r1.transform.baseVal.consolidate().matrix;
var dim = r3.getBBox();

var pos = computePosition(m, dim, angle);

r3.transform.baseVal.initialize(
  svg.createSVGTransformFromMatrix(
    svg.createSVGMatrix()
      .translate(pos.x, pos.y)
      .translate(dim.width/2, dim.height/2)
      .rotate(30)
      .translate(-dim.width/2, -dim.height/2)
  )
)

用这个答案

我找到了这个函数

function computePosition(m, dim, angle){  
  var rad = angle*Math.PI/180;
  var tx = m.e - dim.width/2 + Math.cos(rad)*dim.width/2 - dim.height/2*Math.sin(rad);
  var ty = m.f - dim.height/2 + dim.width/2*Math.sin(rad) + dim.height/2*Math.cos(rad);
  return {x:tx, y:ty}
}

我现在可以创建一个新的变换矩阵并应用于rect r3

var angle = 30;
var m = r1.transform.baseVal.consolidate().matrix;
var dim = r3.getBBox();

var pos = computePosition(m, dim, angle);

r3.transform.baseVal.initialize(
  svg.createSVGTransformFromMatrix(
    svg.createSVGMatrix()
      .translate(pos.x, pos.y)
      .translate(dim.width/2, dim.height/2)
      .rotate(30)
      .translate(-dim.width/2, -dim.height/2)
  )
)

---

你想做什么？为了调整大小，我改变了矩形的宽度/高度（它是平移和旋转的）。我更新

宽度、高度

。似乎我还需要更新

x，y

，因为刷新后，我的矩形会稍微跳到另一个位置。刷新时，我使用（平移（x，y）、旋转（a，宽度/2，高度/2）重新绘制矩形，由于我不更新x，y，矩形正在移动。您想做什么？为了调整大小，我更改矩形的宽度/高度（已平移和旋转）。我更新了

宽度，高度

。似乎我还需要更新

x，y

，因为刷新后，我的矩形会稍微跳到另一个位置。刷新时，我使用（平移（x，y）、旋转（a，宽度/2，高度/2）重新绘制矩形，因为我不更新x，y，所以矩形正在移动