Question

我知道一种非常简单的方法来获取任何SVG元素的当前矩阵变换：

// 't' is a string
var t = window.getComputedStyle(nativeElement, null).transform
console.log(t);

问题是前一个方法返回的小数不超过六位数。例如，之前的代码可能会返回：

matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)

有没有办法更准确地获得任何SVG元素的矩阵变换？

Answer 1

要将当前SVGMatrix属性作为element.transform.baseVal.consolidate().matrix对象获取，您可以使用：

var myrect = document.getElementById("myrect");

console.log(myrect.transform.baseVal.consolidate().matrix);

＆＃13;

<svg>
  <rect id="myrect" width="10" height="10" transform="scale(2) rotate(45)"/>
</svg>

＆＃13;

{{1}}

＆＃13;

Answer 2

合并可以更改元素的“转换”属性值。通过将元素矩阵转换为父矩阵，也可以在不更改转换属性的情况下获得矩阵。

请参阅有关以下内容的文档：

getTransformToElement

function getMatrix(element) {
  var matrix = element.parentNode
     .getScreenCTM()
     .inverse()
     .multiply(element.getScreenCTM());
  return matrix;
}
var myrect = document.getElementById("myrect");

console.log(getMatrix(myrect));

<svg>
  <rect id="myrect" width="10" height="10" transform="scale(2) rotate(45)"/>
</svg>

Answer 3

在这种情况下，如果您知道SVG元素没有可转换的祖先，则可以使用SVGelement.getCTM()函数，因为它更短。我认为函数名称中的CTM是《当前转换矩阵》的缩写形式。

var rect = document.querySelector("#rect");

console.log(rect.getCTM());

<svg>
    <rect id="rect" width="10" height="10" transform="scale(2) rotate(45)"/>
</svg>

rect.getCTM()与rect.transform.baseVal.consolidate().matrix的区别

但是您应谨慎使用此函数，因为只要没有祖先元素具有变换，它就只能提供与矩阵rect.transform.baseVal.consolidate().matrix相同的结果。例如：

var rect = document.querySelector("#rect"),
    ctmMatrix = rect.getCTM(),
    baseValMatrix = rect.transform.baseVal.consolidate().matrix;

console.log('CTM Matrix: translateX = '+ctmMatrix.e+', translateY = '+ctmMatrix.f);
console.log('BaseVal Matrix: translateX = '+baseValMatrix.e+', translateY = '+baseValMatrix.f);

<svg>
    <g transform="translate(35,45)">
        <rect id="rect" width="10" height="10" transform="translate(35,45)"/>
    </g>
</svg>

我感谢@PaulLeBeau对这些矩阵之间的差异的解释。

获取SVG元素的当前矩阵变换

3 个答案: