Question

我有一系列在inkscape（或类似的矢量图形应用程序）中创建的SVG文件。

当SVG中的元素在屏幕上移动时，编辑工具会将翻译应用到SVG中的元素（显然，出于效率原因，它们会执行此操作）。这些工具根据矩阵设置了拖动，调整大小等元素的转换。

问题在于，如果我尝试从javascript中将旋转应用于SVG中的元素，则旋转的应用程序将覆盖转换。这导致的不仅仅是旋转，因为矩阵被旋转替换。

我假设我需要检索矩阵，用我希望的旋转更新矩阵然后重新应用矩阵。

有人可以解释一下如何在尝试将旋转增加一定程度的分数时（由于执行动画而派系）。

我在JSFiddle here中创建了一个示例。虽然现在发生的事情并不明显，但我已经在本地测试了代码。通过firebug进行检查时，我可以看到transform属性正在被rotate（r）替换。

不过，我一直在浏览w3网站，我只找到了this。虽然它深入讨论矩阵，但它没有提供任何示例。我发现很难读，因为我最后一次研究矩阵是在80年代。在我看来，虽然我可能需要做一些矩阵乘法，并可能使用cos和sin。有点希望我不这样做，因为我不确定动画时使用这种方法对性能的影响。

顺便说一句，我已经看过去除SVG转换的工具了。但是，由于我希望使用的SVG文件是另一个项目的一部分，我宁愿避免这样做。此外，它还会在将来产生问题，因为我希望让人们创建自己的SVG，以便与我正在编写的软件一起使用。

Answer 1

使用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);

});

SVG Javascript并在进行轮换时管理翻译矩阵

1 个答案: