0

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

当 SVG 中的元素在屏幕上移动时，编辑工具会对元素进行翻译（显然他们这样做是出于效率原因）。这些工具基于矩阵设置每个被拖动、调整大小等元素的转换。

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

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

有人可以解释一下在尝试将旋转增加几分之一度时如何做到这一点（由于执行动画而产生的派别）。

我在这里的 JSFiddle 中创建了一个示例。虽然不清楚发生了什么，但我已经在本地测试了代码。通过萤火虫检查时，我可以看到变换属性被替换为旋转（r）。

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

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

4

1 回答 1

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

});
于 2012-09-29T07:56:44.280 回答