如何在鼠标单击时停止 SMIL 动画答案

【问题标题】：How to stop SMIL animation on mouse click如何在鼠标单击时停止 SMIL 动画
【发布时间】：2023-02-17 19:16:25
【问题描述】：

我有一个动画 SVG，但我想添加一个按钮来停止动画。我已经尝试了一些事情： pausedAnimations() 似乎是一个简单的 onclick 按钮的解决方案，但它没有用。

这是我的 SVG：

$('#js-toggle').on('click', function() {
      $('.svg-bg').pauseAnimations();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="js-toggle" class="btn" type="button">stop animation</button> 

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="svg-bg">
  <defs>
  <radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
    <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
    <stop offset="0%" stop-color="rgba(168, 255, 210, 0.8)" />
    <stop offset="100%" stop-color="#ff00" />
  </radialGradient>
  <radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
    <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
    <stop offset="0%" stop-color="rgba(168, 236, 255, 0.8)" />
    <stop offset="100%" stop-color="#0ff0" />
  </radialGradient>
  <radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
    <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
    <stop offset="0%" stop-color="rgba(255, 72, 168, 0.8)" />
    <stop offset="100%" stop-color="#f0f0" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
    <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
    <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite" />
  </rect>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
    <animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
    <animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite" />
  </rect>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
    <animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
    <animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" />
    <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite" />
  </rect>
</svg>

【问题讨论】：

标签： javascript jquery svg svg-animate

【解决方案1】：

pauseAnimations 是一种原生 SVG 方法，不是 jQuery 的一部分，因此您需要添加 [0] 来删除 jQuery 包装器，例如

$('#js-toggle').on('click', function() {
      $('.svg-bg')[0].pauseAnimations();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="js-toggle" class="btn" type="button">stop animation</button> 

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="svg-bg">
  <defs>
  <radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
    <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
    <stop offset="0%" stop-color="rgba(168, 255, 210, 0.8)" />
    <stop offset="100%" stop-color="#ff00" />
  </radialGradient>
  <radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
    <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
    <stop offset="0%" stop-color="rgba(168, 236, 255, 0.8)" />
    <stop offset="100%" stop-color="#0ff0" />
  </radialGradient>
  <radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
    <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
    <stop offset="0%" stop-color="rgba(255, 72, 168, 0.8)" />
    <stop offset="100%" stop-color="#f0f0" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
    <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
    <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite" />
  </rect>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
    <animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
    <animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite" />
  </rect>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
    <animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
    <animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" />
    <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite" />
  </rect>
</svg>

【讨论】：