如何通过鼠标点击停止SVG中的SMIL动画？

问题出在你直接对jQuery对象调用了原生SVG方法pauseAnimations()——jQuery包装后的对象不具备这个原生方法，必须拿到实际的SVG DOM元素才能调用。

修复后的代码 #

JavaScript基础版（仅暂停） #

$('#js-toggle').on('click', function() {
  // 从jQuery集合中提取原生SVG元素
  const svgElement = $('.svg-bg')[0];
  svgElement.pauseAnimations();
});

JavaScript进阶版（暂停/播放切换） #

如果需要实现切换功能，可以扩展代码：

let isPaused = false;
$('#js-toggle').on('click', function() {
  const svgElement = $('.svg-bg')[0];
  if (isPaused) {
    svgElement.unpauseAnimations();
    $(this).text('stop animation');
  } else {
    svgElement.pauseAnimations();
    $(this).text('resume animation');
  }
  isPaused = !isPaused;
});

完整HTML代码 #

<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>

关键说明 #

• $('.svg-bg')返回的是jQuery集合对象，必须通过[0]或.get(0)提取其中的原生SVG DOM元素，才能调用pauseAnimations()/unpauseAnimations()这些原生方法。
• pauseAnimations()会暂停SVG内部所有SMIL动画，包括渐变、形状变换等所有动画效果；对应的unpauseAnimations()可以恢复动画播放。

内容的提问来源于stack exchange，提问作者captain ghafa