寻求SVGAnimationElement.beginElement()的生产环境可用替代方案

Great question! You're right to steer clear of SVGAnimationElement.beginElement() in production—it's an experimental API with inconsistent browser support, making it risky for real-world use. Below are three reliable, standards-compliant ways to recreate that mechanical-style second hand animation:

1. Web Animations API (Recommended) #

This is the most flexible standards-based approach, giving you programmatic control over animations while maintaining strong browser compatibility. It works natively with SVG elements and lets you replicate both smooth and stepped (mechanical) motion.

Smooth Rotation Example #

const secHand = document.getElementById('sec-hand');

// Define a 60-second full rotation, linear easing, infinite loop
const rotateEffect = new KeyframeEffect(
  secHand,
  [
    { transform: 'rotate(0deg)' },
    { transform: 'rotate(360deg)' }
  ],
  {
    duration: 60000, // 60 seconds in milliseconds
    iterations: Infinity,
    easing: 'linear'
  }
);

// Start the animation
const animation = new Animation(rotateEffect, document.timeline);
animation.play();

Mechanical Stepped Motion Example #

To mimic the ticking of a real clock (where the second hand jumps one tick per second), use steps() easing and precise keyframes:

const secHand = document.getElementById('sec-hand');
const keyframes = [];

// Generate keyframes for each 6-degree tick (360° / 60 seconds)
for (let i = 0; i <= 60; i++) {
  keyframes.push({
    transform: `rotate(${i * 6}deg)`,
    offset: i / 60 // Map each tick to a fraction of the 60-second duration
  });
}

const rotateEffect = new KeyframeEffect(
  secHand,
  keyframes,
  {
    duration: 60000,
    iterations: Infinity,
    easing: 'steps(60, end)' // Hold each position for one second before jumping
  }
);

const animation = new Animation(rotateEffect, document.timeline);
animation.play();

2. CSS Animations #

If you don't need programmatic control (like pausing/resuming on demand), CSS animations are the simplest option. They work seamlessly with SVG and require minimal code.

Stepped Mechanical Motion CSS #

#sec-hand {
  transform-origin: 50px 50px; /* Match your SVG's hand pivot point (x1="50", y1="50") */
  animation: tick 60s steps(60, end) infinite;
}

@keyframes tick {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Just apply this CSS to your existing <line id="sec-hand"> element—no extra JavaScript needed!

3. Manual Control with requestAnimationFrame #

For full customizability (e.g., syncing with real time, adjusting speed dynamically), use requestAnimationFrame to manually update the second hand's rotation.

const secHand = document.getElementById('sec-hand');
let startTime;
let animationId;

function updateHand(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  
  // Calculate rotation: 360° over 60 seconds
  let rotation = (elapsed / 60000) * 360;
  
  // Convert to stepped motion (6° per second)
  rotation = Math.floor(rotation / 6) * 6;
  
  // Apply rotation around the pivot point (50,50)
  secHand.setAttribute('transform', `rotate(${rotation} 50 50)`);
  
  animationId = requestAnimationFrame(updateHand);
}

// Start the animation
requestAnimationFrame(updateHand);

// To pause later: cancelAnimationFrame(animationId)

All three methods are fully supported in modern browsers and avoid the risks of experimental APIs. Pick the one that best fits your need for control and simplicity!

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