Question

我设置了一个动画路径，从moseover开始，在mouseout上停止+重置动画，填充=＆＃34;冻结＆＃34;只是停止它，但当我再次鼠标悬停时，它从头开始

＆＃13;

<svg xmlns="w3.org/2000/svg"; viewBox="0 0 500.1 489.1" class="svg-gears"> 
  <rect id="deepPink-rectangle" width="300" height="300" x="100" y="100" fill="deepPink" >
    <animateTransform
      attributeName="transform" 
      type="rotate"
      dur="6s"
      from="0 315 184"
      to="360 315 184"
      repeatCount="indefinite"
      begin="mouseover"
      end="mouseout"
    />
  </rect>
</svg>

＆＃13;

如何从最后一个冻结位置继续？

Answer 1

使用SMIL动画无法实现这一点，但使用CSS动画很容易实现，animation-play-state="paused"：

＆＃13;

#deepPink-rectangle {
  animation: rotate 6s linear infinite;
  animation-play-state: paused;
  transform-origin: 250px 250px;
}
#deepPink-rectangle:hover {
  animation-play-state: running;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

＆＃13;

<svg viewBox="0 0 500.1 489.1">
  <rect id="deepPink-rectangle" width="300" height="300" x="100" y="100" fill="deepPink" />
</svg>

＆＃13;

Answer 2

如果你想坚持使用SMIL动画，那么你需要使用一点Javascript。

var svg = document.querySelector(".svg-gears");
svg.pauseAnimations();

svg.addEventListener("mouseover", function() {
  svg.unpauseAnimations();
});

svg.addEventListener("mouseout", function() {
  svg.pauseAnimations();
});

<svg xmlns="w3.org/2000/svg"; viewBox="0 0 500.1 489.1" class="svg-gears"> 
  <rect id="deepPink-rectangle" width="300" height="300" x="100" y="100" fill="deepPink" >
    <animateTransform
      attributeName="transform" 
      type="rotate"
      dur="6s"
      from="0 315 184"
      to="360 315 184"
      repeatCount="indefinite"
    />
  </rect>
</svg>

如何从最后一个停止点重复svg中的动画？

2 个答案: