svg - getTransformToElement 的更多用法

Question

我找不到有关 getTransformToElement 方法以及如何正确使用它的详细信息。

从规范

"Returns the transformation matrix from the user coordinate system on the current element (after application of the ‘transform’ attribute, if any) to the user coordinate system on parameter element (after application of its ‘transform’ attribute, if any)."

诸如 SVG Canvas 、 View 框、视口(viewport)、用户坐标、屏幕坐标 (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}

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



如以下评论中所述，此方法已弃用，取而代之的是 getCTM in the upcoming SVG 2 standard .