获取SVG元素的当前矩阵转换
获取SVG元素的当前矩阵转换
提问于 2017-09-26 19:51:21
我知道获得任何SVG元素当前矩阵转换的一种非常简单的方法：
// 't' is a string
var t = window.getComputedStyle(nativeElement, null).transform
console.log(t);问题是，前面的方法返回不超过6个小数的数字。例如，前面的代码可能返回：
matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)有没有一种方法可以更准确地得到任何SVG元素的矩阵变换？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-27 13:17:21
要将当前的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>
Stack Overflow用户
发布于 2020-11-24 09:59:41
在这种情况下，如果您知道您的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与Difference
但是，您应该小心使用这个函数，因为它只给出与矩阵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解释了这个矩阵之间的差异。
Stack Overflow用户
发布于 2020-10-18 15:45:42
合并可以更改元素的“转换”属性值。您还可以通过将元素矩阵转换为父属性，而无需更改转换属性就可以获得矩阵。
见有关下列方面的文件：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46434687
复制相关文章
相似问题
腾讯云开发者
