svg 将矩阵符号转换为旋转/平移答案

【问题标题】：svg transform matrix notation to rotation / translationsvg 将矩阵符号转换为旋转/平移
【发布时间】：2016-02-28 07:36:09
【问题描述】：

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

我正在将 svg 变换应用于 svg rect (r1)

<svg width="400" height="400" viewBox="0 0 400 400" 
  xmlns="http://www.w3.org/2000/svg">
    <g id="r1" transform="translate(20,100) rotate(30, 175, 85)">
        <rect width="350" height="170" fill="#69c" fill-opacity=".1" />
    </g>
    <g id="r2" transform="">
        <rect width="150" height="100" fill="green" fill-opacity=".1" />
    </g>
    <g id="r3" transform="">
        <rect width="150" height="100" fill="red" fill-opacity=".1" />
    </g>
</svg>

这给了我以下变换矩阵 SVGMatrix { a: 0.8660253882408142, b: 0.5, c: -0.5, d: 0.8660253882408142, e: 85.945556640625, f: 23.887840270996094 }

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

如何从变换矩阵中获取这些 x、y 值？

translate(x,y) rotate(a, x+rect.w, y+rect.height)

我制作了一个 jsbin 来说明我的问题

https://jsbin.com/luvome/edit?html,js,output

如果您能提供帮助，我将不胜感激。谢谢。

【问题讨论】：

你想做什么？
为了调整大小，我更改了矩形的宽度/高度（已平移和旋转）。我更新width,height。看来我还需要更新x,y，因为刷新后，我的矩形稍微跳到另一个位置。刷新时，我使用 (translate(x,y), rotate(a, width/2, height/2) 重新绘制了矩形，因为我不更新 x, y，矩形正在移动

标签： javascript matrix svg transform

【解决方案1】：

使用这个答案https://stackoverflow.com/a/15134993/2125385

我找到了这个功能

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)
  )
)

【讨论】：