getTransformToElement的更多用法

2 回答

• 0

  它返回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}
  

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

  

  如下面的评论中所述，此方法已弃用，以支持getCTM in the upcoming SVG 2 standard .

  回复于 2024-05-03T19:51:28+08:00
• 11

  可能的替代品

  fromElement.getTransformToElement(toElement)
  

  是

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

  回复于 2024-05-03T19:51:28+08:00