获取SVG元素的当前矩阵变换 [英] Get the current matrix transformation of an SVG element

问题描述

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

I know a very easy way to get the current matrix transformation of any SVG element:

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

问题是以前的方法返回的数字不超过六个小数.例如，先前的代码可能返回:

The problem is that the previous method returns numbers with no more than six decimals. For example, the previous code may return:

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

有没有一种方法可以更准确地获取任何SVG元素的矩阵变换?

Is there a way to get the matrix transformation of any SVG element more accurately?

推荐答案

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

To get the current transform attribute as an SVGMatrix object, you can use:

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>

这篇关于获取SVG元素的当前矩阵变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！