Question

旋转works great的Svg.js动画，因为它默认使用元素的中心点，即使元素从一个点移动到另一个点，但现在我{m} having trouble当我向图像添加剪切路径时，因为中心点仍然是原始图像的中心，即使它在剪切路径之外。我想改用剪切路径的中心点。我能找到的最接近的是a question about d3.js。

var rect = draw.rect(60,60)
var picture = draw.image(img.jpg).clipWith(rect)
picture.animate(1000).rotate(360)

如何在svg.js中使用它？

Answer 1

您可以将旋转中心传递给rotate()方法。你所要做的就是找出剪辑矩形的中心所在的位置并将其传递出来。它的结果是90,80。

this.animate(1000).rotate(
    360 + currentRotation, 90,80
)

Demo here

出于某种原因，它第一次没有工作，但之后它工作正常。这似乎是svg.js中的一个错误。

svg.js剪切元素的旋转中心

1 个答案: