SVG Javascript和在执行旋转时管理转换矩阵
我有一系列在inkscape（或类似的矢量图形应用程序）中创建的SVG文件 当SVG中的元素在屏幕上移动时，编辑工具会将其应用于SVG中的元素（显然，它们这样做是为了提高效率）。这些工具根据矩阵设置拖动、调整大小等的每个元素的变换 问题是，如果我尝试从javascript中对SVG中的元素应用旋转，则旋转的应用将覆盖转换。这导致的不仅仅是旋转，因为矩阵被替换为旋转 我假设我需要检索矩阵，用我希望的旋转更新矩阵，然后重新应用矩阵 有人能解释一下，当你试图增加旋转度的分数时，你是怎么做到的吗 我在JSFIDLE中创建了一个示例。虽然不清楚发生了什么，但我已经在本地测试了代码。当通过firebug检查时，我可以看到transform属性被替换为rotate（r） 顺便说一句，我一直在通过w3网站阅读，我只发现。虽然它深入讨论了矩阵，但没有提供任何示例。我发现很难阅读，因为我上一次学习矩阵是在80年代。但在我看来，我可能需要做一些矩阵乘法，并可能使用cos和sin。有点希望我不会，因为我不确定在制作动画时使用这种方法对性能的影响SVG Javascript和在执行旋转时管理转换矩阵,javascript,matrix,svg,transform,Javascript,Matrix,Svg,Transform,我有一系列在inkscape（或类似的矢量图形应用程序）中创建的SVG文件 当SVG中的元素在屏幕上移动时，编辑工具会将其应用于SVG中的元素（显然，它们这样做是为了提高效率）。这些工具根据矩阵设置拖动、调整大小等的每个元素的变换 问题是，如果我尝试从javascript中对SVG中的元素应用旋转，则旋转的应用将覆盖转换。这导致的不仅仅是旋转，因为矩阵被替换为旋转 我假设我需要检索矩阵，用我希望的旋转更新矩阵，然后重新应用矩阵 有人能解释一下，当你试图增加旋转度的分数时，你是怎么做到的吗 我在J
顺便说一句，我已经看过从SVG中去除转换的工具。然而，由于我希望使用的SVG文件是另一个项目的一部分，我宁愿避免这样做。此外，它还会在将来产生问题，因为我希望让人们创建自己的SVG，以便与我正在编写的软件一起使用。使用SVG DOM附加翻译，而不是覆盖翻译
$('#control1').mousedown(function() {
if (timer !== null) {
clearInterval(timer);
timer = null;
}
// change to stop if the current anim is running, and get the current angle
timer = setInterval(function() {
angle += 1;
if (angle >= 360) {
angle -= 360;
}
if (anim.transform.baseVal.numberOfItems < 2) {
var transform = document.getElementById("arm1").createSVGTransform();
transform.setRotate(angle, 100, 100);
anim.transform.baseVal.appendItem(transform);
} else {
anim.transform.baseVal.getItem(1).setRotate(angle, 100, 100);
}
}, 1);
});
$（'#control1'）.mousedown（函数（）{
如果（计时器！==null）{
清除间隔（计时器）；
定时器=空；
}
//如果当前动画正在运行，则更改为“停止”，并获取当前角度
计时器=设置间隔（函数（）{
角度+=1；
如果（角度>=360）{
角度-=360；
}
if（anim.transform.baseVal.numberOfItems<2）{
var transform=document.getElementById（“arm1”）.createSVGTransform（）；
transform.setRotate（角度，100100）；
anim.transform.baseVal.appendItem（transform）；
}否则{
anim.transform.baseVal.getItem（1）.setRotate（角度，100100）；
}
}, 1);
});