getTransformToElement的更多用法 [英] More usage of getTransformToElement

问题描述

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

I could not find much details on getTransformToElement method, and how to use it correctly.

根据规范

返回转换矩阵 从用户坐标系上 当前元素(应用后 "transform"属性(如果有)) 用户坐标系在 参数元素(应用后 的"transform"属性 任何)."

"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画布，视区，视口，用户坐标，屏幕坐标(http://www.w3.org/TR/SVG/coords.html)之类的术语使您难以理解此接口的确切用途.

Terminology like, SVG canvas, viewbox, viewport, user cordinate, screen cordinate (http://www.w3.org/TR/SVG/coords.html) etc make it hard to understand what exactly this interface is used for.

谢谢

bsr

推荐答案

它返回

It returns a Transformation Matrix, I wouldn't worry too much about that other terminology for now. If you have some SVG like this:

<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:

You can then use getTransformToElement like this:

//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将是一个代表矩阵的对象(也有很多方法，但我忽略了它们):

At the end of that code m will be an object representing a matrix (there's a bunch of methods too, but I'm ignoring them):

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

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

You can then use that matrix to apply the same transform as on mytext relative to mysvg to any other element as per the matrix multiplication from the SVG spec:

不建议使用此方法，而推荐使用 getCTM即将推出的SVG 2标准.

As noted in the comment below this method is deprecated in favour of getCTM in the upcoming SVG 2 standard.

这篇关于getTransformToElement的更多用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！