Svg 缩放旋转对象以适合特定的矩形

如何在旋转的矩形元素中找到比例，以便使其适合特定大小的边界矩形（未旋转）

---

基本上，我想要与getBoundingClientRect相反的setBoundingClientRect。

首先，您需要使用

.getTransferorMToElement

将转换应用到元素，并使用

rect.getBBox（）的结果计算实际大小。宽度此选项可以将比例因子计算为所需大小，并将其添加到矩形的变换中。我的意思是，你应该用一个新的比例矩阵乘以实际的变换矩阵

但是：这是一个对AABB感兴趣的情况的描述，表示轴对齐的边界框，
getBoundingClientRect
的结果为实际旋转的边界框提供了什么，因此在这种情况下，矩形本身需要从宽度和/或高度计算（并应用）比例因子

祝你好运

编辑：：

function getSVGPoint( x, y, matrix ){
    var p = this._dom.createSVGPoint();
    p.x = x;
    p.y = y; 
    if( matrix ){
        p = p.matrixTransform( matrix );
    }
    return p;
}

function getGlobalBBox( el ){
    var mtr = el.getTransformToElement( this._dom );
    var bbox = el.getBBox();
    var points = [
        getSVGPoint.call( this, bbox.x + bbox.width, bbox.y, mtr ),
        getSVGPoint.call( this, bbox.x, bbox.y, mtr ),
        getSVGPoint.call( this, bbox.x, bbox.y + bbox.height, mtr ),
        getSVGPoint.call( this, bbox.x + bbox.width, bbox.y + bbox.height, mtr ) ];

    return points;

};

有一次我用这个代码做了一个类似的把戏<代码>此。_dom

指的是

，而

el

指的是元素。第二个函数返回一个点数组，从右上角开始，沿bbox的逆时针方向进行

编辑：

.getBBox（）

的结果不包括应用于元素的变换，我猜新的所需大小是在绝对坐标中。因此，您需要做的第一件事是使»BBox«全球化

然后，您可以通过以下方式计算sx和sy的比例因子：

var sx = desiredWidth / globalBBoxWidth;
var sy = desiredHeight / globalBBoxHeight;

var mtrx = <svg>.createSVGMatrix();
mtrx.a = sx;
mtrx.d = sy;

var sx=desiredWidth/globalBBoxWidth；
var sy=所需高度/全局高度；
var mtrx=.createSVGMatrix（）；
mtrx.a=sx；
mtrx.d=sy；

然后，您必须将该矩阵附加到元素的转换列表中，或者将其与实际矩阵连接并替换它，这取决于您的实现。这个技巧中最容易混淆的部分是确保使用相同的变换中的坐标计算缩放因子（绝对值比较方便）。在此之后，将缩放应用于

的变换，不要替换整个矩阵，将其与实际应用的矩阵连接，或将其作为新项附加到变换列表中，但请确保不要将其插入现有项之前。在矩阵串联的情况下，确保保持乘法顺序

---

最后的步骤取决于您的实现，您如何处理转换，如果您不知道您有哪些可能性，请查看并特别注意您需要实现的DOMInterfaces

谢谢你的快速回答。在尝试了我脑海中出现的几乎所有东西之后，我想我已经失去了一个例子，但这要求太高了。我仍然不知道旋转元素的比例如何与合适的边界框正确关联。你最初的帖子给了我足够的线索，让我找到一个非常相似的代码（我甚至用类似的方式命名变量lol:））。现在，这似乎是可行的，然而，由于某种原因，矩阵现在是倾斜的。。。我还是不知道如何才能得到正确的非倾斜形状，有什么想法吗？