Блог

Я не смог найти много подробностей о методе getTransformToElement и о том, как его правильно использовать.

Из спецификации

«Возвращает матрицу преобразования из пользовательской системы координат для текущего элемента (после применения атрибута ‘transform’, если таковой имеется) в пользовательскую систему координат для элемента parameter (после применения его атрибута ‘transform’, если таковой имеется)».

Такая терминология, как SVG canvas, viewbox, видовой экран, кординат пользователя, кординат экрана (http://www.w3.org/TR/SVG/coords.html ) и т.д. затрудняют понимание того, для чего именно используется этот интерфейс.

Спасибо,

bsr

Он возвращает матрицу преобразования, я бы пока не слишком беспокоился об этой другой терминологии. Если у вас есть какой-нибудь 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}
  

Затем вы можете использовать эту матрицу, чтобы применить то же преобразование, что и on mytext относительно mysvg любого другого элемента в соответствии с матричным умножением из спецификации SVG:

Как отмечено в комментарии ниже, этот метод устарел в пользу getCTM в предстоящем стандарте SVG 2.

возможная замена для

 fromElement.getTransformToElement(toElement)
  

является

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