svg.js 被裁剪元素的旋转中心

Question

Svg.js 旋转动画works great 因为它默认使用元素的中心点，即使元素从一个点移动到另一个点，但现在我在添加剪切路径时是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 中的一个错误。