当我在 snap.svg 中转换一条线时，它会旋转回原来的位置？

Question

尝试为一个项目制作一个简单的 svg 动画。我需要画一条线，旋转它，然后在屏幕上移动它。我试过用变换和平移来做这个，但线总是旋转回原来的位置。如何在不旋转的情况下移动线？？？

这是我的 codepen 和我的代码：https://codepen.io/anon/pen/rwBXaY

window.onload = function(){

var s = Snap("#svg");


var square = s.select('#square');
var line = s.select('#divide');
var diagonal = s.select('#diagonal');


square.animate({
	opacity:1}, 500);


setTimeout(function() {
  line.animate({
   opacity:1}, 250);
}, 2000);

setTimeout(function() {
  line.animate({
	transform: 'r-90, 249.25, 506.458'}, 500);
}, 3000);

setTimeout(function() {
  diagonal.animate({
	opacity:1}, 250);
}, 4000);

setTimeout(function() {
  diagonal.animate({
	transform: 'r64, 225.25, 506.458'}, 500);
}, 5000);

setTimeout(function() {
  diagonal.animate({
  	transform: 'r-64, 225.25, 506.458',
	transform: 'translate(49, 0)'}, 500);
}, 6000);
  }

<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" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
	 height="1000px" viewBox="0 0 500 1000" enable-background="new 0 0 500 1000" xml:space="preserve">
  
<rect id="square" class="step1" opacity="0" x="201.25" y="457.458" fill="none" stroke="red" stroke-width="2" width="98" height="98"/>
  
<line id="divide" class="step2" opacity="0" fill="none" stroke="red" stroke-width="2" x1="201.25" y1="506.458" x2="299.25" y2="506.458"/>
  
<line id="diagonal" opacity="0" fill="none" stroke="red" stroke-width="2" x1="201.25" y1="555.458" x2="249.25" y2="457.458"/>
</svg>

我希望旋转的线水平移动到正方形的一半，但保持水平。

Answer 1

我不确定你所追求的效果，因为线条的大小不同，如果你想让它在矩形中心成为一个十字，但你可能想使用你的初始 transform()已经应用了，所以当我们构建转换时它看起来像下面这样

diagonal.animate({
    transform: 'r-64, 225.25, 506.458',
    transform: 't25,0' + diagonal.transform() +'s0.9'}, 
500);

https://codepen.io/anon/pen/NgWgWe