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

Question

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

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

问题是之前的方法return的数字不超过六位小数。例如，前面的代码可能 return:

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

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

Answer 1

要获取当前 transform 属性作为 SVGMatrix 对象，您可以使用：

element.transform.baseVal.consolidate().matrix

var myrect = document.getElementById("myrect");

console.log(myrect.transform.baseVal.consolidate().matrix);

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

Answer 2

合并可以更改您的元素 'transform' 属性值。也可以在不改变transformation属性的情况下，通过将元素矩阵变换到parent得到一个矩阵

查看有关以下内容的文档：

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 是 «current transformation matrix» 的缩写形式。

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 元素的当前矩阵变换

Get the current matrix transformation of an SVG element

javascript

svg

transformation

matrix