javascript - 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 中的一个错误。