Javascript 获取svg元素的全局变换矩阵
我想使用浏览器svg+JavaScript从用户准备的svg模板（例如，在Inkscape中创建的模板）生成动态图像，其中有矩形占位符标记动态图形应该放置的位置 理想情况下，应该允许用户（模板创建者）以任何方式移动、缩放、旋转和倾斜矩形（倾斜后没有那么多矩形）。他们必须做的唯一一件事是为那些占位符矩形设置正确的id值Javascript 获取svg元素的全局变换矩阵,javascript,svg,Javascript,Svg,我想使用浏览器svg+JavaScript从用户准备的svg模板（例如，在Inkscape中创建的模板）生成动态图像，其中有矩形占位符标记动态图形应该放置的位置 理想情况下，应该允许用户（模板创建者）以任何方式移动、缩放、旋转和倾斜矩形（倾斜后没有那么多矩形）。他们必须做的唯一一件事是为那些占位符矩形设置正确的id值 我正在寻找一种方法，如何获得/计算这些占位符的变换矩阵。由于它们可以嵌套在组中，因此仅读取元素的属性是不够的。SVG命令getCTM和/或getScreenCTM可能就是您要查找的
我正在寻找一种方法，如何获得/计算这些占位符的变换矩阵。由于它们可以嵌套在组中，因此仅读取元素的属性是不够的。SVG命令
getCTMgetScreenCTM$（“#mySvgCircleId”）[0]。getScreenCTM（）svggetCTMgetScreenCTM
和getCTM
都考虑到任何封闭的祖先元素的转换，例如任何getScreenCTM
组元素，直到封闭的g
元素。e、 g.两个命令的“untransformedlect1”和“transformedlect1”返回的矩阵不同svg
结果不受封闭的getCTM
元素在其父元素中的位置的影响，而svg
结果不受影响。e、 g.使用getScreenCTM
时，“untransformedRect1”和“untransformedRect2”的结果相同，但使用getCTM
时结果不同getScreenCTM
var infoType=“CTM”；
显示（“来自getCTM（）的矩阵结果”）；
显示（getInfo（信息类型，“untransformedRect1”）；
显示（getInfo（信息类型，“transformedRect1”）；
显示（getInfo（信息类型，“untransformedRect2”）；
显示（getInfo（信息类型，“transformedRect2”）；
显示（
）；
var infoType=“ScreenCTM”；
显示（“getScreenCTM（）的矩阵结果”）；
显示（getInfo（信息类型，“untransformedRect1”）；
显示（getInfo（信息类型，“transformedRect1”）；
显示（getInfo（信息类型，“untransformedRect2”）；
显示（getInfo（信息类型，“transformedRect2”）；
函数getInfo（mtrx，id）{
var-mtrx；
如果（信息类型==“CTM”）{
var mtrx=$（“#”+id）[0].getCTM（）；
}else if（信息类型==“ScreenCTM”）{
var mtrx=$（“#”+id）[0]。getScreenCTM（）；
}
var-str=
r（mtrx.a）+“，”+
r（mtrx.b）+“，”+
r（mtrx.c）+“，”+
r（mtrx.d）+“，”+
r（mtrx.e）+“，”+
r（mtrx.f）；
返回id+”：矩阵：“+str；
}
函数r（num）{
返回数学整数（num*1000）/1000；
}
功能显示（msg）{
文件。写（msg+“
”）；
}
根据查看方式，可能需要向下滚动查看矩阵值
移位==>
getScreenCTM