getTransformToElement的更多用法

Question

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

从规格

"将当前元素上的用户坐标系(在应用'transform'属性之后,如果有的话)返回到参数元素上的用户坐标系(在应用其'transform'属性之后,如果有的话)."

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

谢谢,

BSR

Answer 1

它返回一个转换矩阵,我现在不会太担心其他术语.如果您有这样的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在即将推出的SVG 2标准中被弃用.

Answer 2

可能的替代品

fromElement.getTransformToElement(toElement)

是

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