javascript - 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>