HTML5——超强的 SVG 动画

SVG 动画可以通过 SMIL 或者 JavaScript 实现。以下是一个使用 SMIL 的 SVG 圆形进度条示例：

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="54" fill="none" stroke-width="10" stroke="#000" class="progress-circle" />
  <circle cx="60" cy="60" r="54" fill="none" stroke-width="10" stroke="#f00" stroke-dasharray="314" stroke-dashoffset="314" class="progress-circle-bg" />
  <text x="50%" y="50%" class="progress-text" text-anchor="middle" dy=".3em" font-size="2em">0%</text>
</svg>
 
<script>
  const circle = document.querySelector('.progress-circle');
  const text = document.querySelector('.progress-text');
  const length = Math.PI * 2 * circle.r.baseVal.value;
 
  function setProgress(percentage) {
    const offset = length - percentage / 100 * length;
    circle.setAttribute('stroke-dashoffset', offset);
    text.textContent = Math.round(percentage) + '%';
  }
 
  // 使用 SMIL 动画
  // <animate> 元素定义了一个动画，在 5 秒内将 stroke-dashoffset 从 314 改变至 0
  circle.innerHTML += '<animate attributeName="stroke-dashoffset" dur="5s" from="314" to="0" fill="freeze" />';
 
  // 或者使用 JavaScript 动画
  setTimeout(() => setProgress(100), 5000); // 在 5 秒后设置进度条为 100%
</script>

这段代码定义了一个 SVG 圆形进度条，并通过 SMIL 动画在 5 秒内从 0% 加载到 100%。如果需要使用 JavaScript 控制动画，可以移除 <animate> 元素并使用 setTimeout 调用 setProgress 函数。这两种方式都展示了如何在 HTML5 中使用 SVG 制作动画。