你好我需要为垂直条设置动画,以便在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>
&#13;
答案 0 :(得分:2)
在设置具有中心坐标的旋转动画时,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>