Question

我的svg.js代码使用旋转动作和移动动作，但两个结果没有相同的中心坐标这是我的代码

<body>
    <div id="drawing"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js"></script>
    <script type="text/javascript">
        var draw = SVG('drawing')
        var group_1 = draw.group()
        var group_2 = draw.group()
        var rect_1 = group_1.rect(50, 20).fill('#f06').center(50, 50)
        var rect_2 = group_2.rect(50, 20).fill('#f09').center(50, 50)

        rect_1.animate(1000).rotate(45).after(function(){    
        group_1.animate(1000).center(100, 100)})

        group_2.animate(1000).center(100, 100)
    </script>
</body>

Answer 1

在SVG中，需要将组理解为元素的分组。与photohop基本相同。您可以选择多个元素，然后一次旋转或缩放它们。反过来，这意味着组本身没有几何。这完全取决于该组在屏幕上的可见位置（x，y）或它的bif高度（带有/高度）。

这就是为什么不能move分组的原因。您只能对其进行转换。为了使api简单易用，svg.js提供了方便的移动和居中方法，该方法可在后台进行翻译。

在您的示例中，您在旋转组之后将其移动。但是，您需要进行绝对转换。这意味着svg.js尝试使运动不配合到已经存在的旋转中。有时这种数学进展不太顺利。

要解决您的问题，您必须改用相对转换。这意味着运动位于旋转的最上方。这也意味着您必须确定要移动组的数量。

我们目前正在开发svg.js的版本3，该版本大大简化了这种转型业务。所以我希望最终的解决方案很快就会出现

svg.js中的动画没有相同的结果

1 个答案: