getTransformToElement的更多用法

Question

我找不到有关getTransformToElement方法的更多细节，以及如何正确使用它。

来自规范

  

“返回转换矩阵   从用户坐标系上   当前要素（申请后）   'transform'属性，如果有的话）   用户坐标系   参数元素（申请后）   它的'transform'属性，如果   任何）“。

术语，如SVG画布，视图框，视口，用户坐标，屏幕坐标（http://www.w3.org/TR/SVG/coords.html）等使得很难理解这个界面究竟是用于什么的。

感谢，

BSR

Answer 1

它返回Transformation Matrix，我现在不会太担心其他术语。如果您有这样的SVG：

<svg id="mysvg" viewBox="0 0 640 480">
    <g transform="skewX(45) skewY(33)">
        <text x="60" y="290" id="mytext">Example</text>
    </g>
</svg>

然后您可以像这样使用getTransformToElement：

//Get the SVG root for context
var s = document.getElementById('mysvg');
//Get a reference to the element
var t = document.getElementById('mytext');
//Find the transformation that would need to be applied to s to put it in the same co-ordinate space as t
var m = s.getTransformToElement(t);

在代码结束时，m将是一个表示矩阵的对象（也有一堆方法，但我忽略了它们）：

m = {a: 1, b: -0.6494075655937195, c: -1, d: 1.6494076251983643, e: 0, f: 0}

然后，根据SVG规范中的矩阵乘法，您可以使用该矩阵将mytext相对于mysvg的相同变换应用于任何其他元素：

如下面的评论中所述，此方法已弃用，而不是getCTM in the upcoming SVG 2 standard。

Answer 2

可能的替代品

fromElement.getTransformToElement(toElement)

是

toElememnt.getScreenCTM().inverse().multiply( fromElement.getScreenCTM() )