snap.svg: 错误的旋转原点

Question

你好，我需要为垂直条设置动画，以便在 SVG 上构建基于矢量的 html 节拍器。我搜索了很多来解决我的问题，但我无法做我需要的。我需要有一个垂直条（基本上是一个矩形）在他的中心底部旋转（用红点突出显示），就像这个视频中一样（抱歉我用 Premiere 做了它，它不像我希望的那样准确，但我希望足够清楚了）：

但我总是得到错误的旋转，旋转也涉及平移，我不知道为什么，我担心我对 snap svg 的了解不足（看代码片段）：

var s = Snap("#svg");
var rect = s.rect(200,130, 40,200).attr({ stroke: '#FFFF00', 'strokeWidth': 3, fill: '#202070' });
var bbox = rect.getBBox();
var circle = s.circle(bbox.cx, bbox.y2, 10).attr({fill: 'red'});
rect.animate({  transform: "r45," + (bbox.cx) + ',' + (bbox.y2)   }, 2500);

#svg {
    width : 400px ;
    height: 400px ;
}

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

Answer 1

看起来 Snap 0.5.0+ 在为具有中心坐标的旋转设置动画时存在错误。如果你回到以前的版本 (0.4.1)，它可以工作。

var s = Snap("#svg");
var rect = s.rect(200,130, 40,200).attr({ stroke: '#FFFF00', 'strokeWidth': 3, fill: '#202070' });
var bbox = rect.getBBox();
var circle = s.circle(bbox.cx, bbox.y2, 10).attr({fill: 'red'});
rect.animate({  transform: "r45," + (bbox.cx) + ',' + (bbox.y2)   }, 2500);

#svg {
    width : 400px ;
    height: 400px ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

snap.svg: 错误的旋转原点

snap.svg: wrong origin point of rotation

javascript

svg

snap.svg