Question

我是svg的初学者，并且我要尝试将svg动画化为-45度。我正在使用Snap.js来处理动画。动画的行为不像我期望的那样，我不确定如何修复它。动画在正确的位置结束，但是当它旋转时，它似乎在向右移动，然后在旋转到结束位置时又向左移动。

很抱歉，如果该说明令人困惑，我提供了一些我制作的JS小提琴的链接，以便任何帮助的人都可以将两者进行比较。 CSS小提琴只是为了演示我要使用Snap进行的动作：将旋转平稳地旋转到新位置，而无需先左后右移动。下面是我使用的代码：

<svg height="200" width="500" id="semaphore">
  <g transform="rotate(-45,200,100)">
     <circle id="light" cx="200" cy="130" r="10" fill="red"></circle>
  </g>
  <g id="signal" >
  <path d="M200 142
     L320 142
     L320 125
     L250 127
     Q235 125, 233 116
     T218 108
     Q211 110,206 114
     Q198 118, 189 111
     Q178 105, 169 111
     Q155 135, 200 142" fill="none" stroke="black"></path>
  <path d="M176 108
     L176 106
     Q188 106, 187 100
     A1 1 0 0 1 213 100
     Q212 106,224 106
     L224 108" fill="none" stroke="black"></path>
  <circle cx="200" cy="100" r="8" fill="none" stroke="black"></circle>
  <line x1="200" y1="92" x2="200" y2="108" stroke="black"></line>
  <line x1="192" y1="100" x2="208" y2="100" stroke="black"></line>
  <g transform="rotate(-45,200,100)">
    <circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
  </g>
  <g>
    <circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
  </g>
  <g transform="rotate(45,200,100)">
    <circle cx="200" cy="130" r="10" fill="none" stroke="black"></circle>
  </g>
 </g>
</svg>
<input type="button" value="Click" id="testButton">

//JQuery-Snap.js
$(document).ready(function(){
  $("#testButton").on("click", function(){
    clickMe();
  });
});

function clickMe(){
   var signal = Snap("#semaphore");
   signal.select("#light").attr({fill:"yellow"});
   signal.select("#signal").animate({transform:"r- 45,200,100"},3000,mina.linear);
}

//CSS For Other Rotation Animation
#semaphore{
  transform-origin:200px 100px;
  -webkit-animation-name: approach; 
  -webkit-animation-duration: 3s; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: approach; 
  -moz-animation-duration: 3s; 
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  animation-name: approach; 
  animation-duration: 3s; 
  animation-iteration-count: 1;
  animation-timing-function: linear;
 }

 @keyframes approach{
   0% {transform:rotate(0deg);}
   100%{transform:rotate(-45deg);}
 }

JS Fiddle Using Snap

JS Fiddle Using CSS

让我知道是否需要更多信息。预先感谢您的帮助，肖恩

Answer 1

这是因为我认为该版本的Snap中已修复了一个错误（如果没有，则可能需要检查dev分支，否则请返回0.4.1）

例如，从下面加载了一个不同的Snap版本。

jsfiddle

https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js

SVG的旋转动画

1 个答案: