SVG变换矩阵符号，以旋转/平移

我申请一个SVG变换为SVG矩形（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位置[R

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

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

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

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

，我会很感激，如果你可以提供帮助。谢谢。

来源

2015-11-25 lionelB

你想做什么？ – CoderPi

调整大小，我改变我的矩形（这是翻译和旋转）的宽度/高度。我更新'宽度，高度'。它似乎我还需要更新'x，y'，因为刷新后，我的矩形略微跳到另一个位置。刷新时，我使用（translate（x，y），rotate（a，width/2，height/2）重绘了矩形，并且由于我没有更新x，y，矩形正在移动 – lionelB

使用这个答案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} 
}

我现在可以创建一个新的变换矩阵，并适用于矩形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) 
) 
)

来源

2015-11-25 15:14:14 lionelB

SVG变换矩阵符号，以旋转/平移

回答

相关问题