寻求将纯SVG动画转成webm/mov的可靠方法及脚本适配方案

Absolutely! You can absolutely adapt the MediaRecorder API approach to record your SVG animation into a WebM file. Let’s break down how to implement this for your specific animation:

Step 1: Set Up Your HTML Structure #

First, wrap your SVG in a container element so we can target it easily. For example:

<div id="animation-container">
  <!-- Your full SVG code goes here -->
</div>

Step 2: Add a Hidden Capture Canvas #

MediaRecorder works with a MediaStream, so we’ll draw your SVG onto a canvas and use that canvas’s stream for recording. Add a hidden canvas to your page:

<canvas id="recorder-canvas" style="display: none;"></canvas>

Step 3: Tailored Recording Script #

Here’s a script built to work with your animation. It handles frame capture, recording sync, and saving the final WebM file:

// Grab elements from the page
const svgContainer = document.getElementById('animation-container');
const svg = svgContainer.querySelector('svg');
const canvas = document.getElementById('recorder-canvas');
const ctx = canvas.getContext('2d');

// Match canvas size to your SVG's viewBox dimensions
canvas.width = svg.viewBox.baseVal.width;
canvas.height = svg.viewBox.baseVal.height;

// Create a media stream from the canvas (30 FPS)
const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });

// Store recorded video chunks
let recordingChunks = [];
recorder.ondataavailable = (e) => recordingChunks.push(e.data);
recorder.onstop = () => {
  // Convert chunks to a blob and trigger download
  const videoBlob = new Blob(recordingChunks, { type: 'video/webm' });
  const downloadUrl = URL.createObjectURL(videoBlob);
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = 'my-svg-animation.webm';
  downloadLink.click();
  URL.revokeObjectURL(downloadUrl);
};

// Draw the current SVG state to the canvas each frame
function captureFrame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const svgImage = new Image();
  svgImage.onload = () => ctx.drawImage(svgImage, 0, 0);
  // Serialize the current SVG state to an image source
  svgImage.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg));
}

// Start recording and sync with your animation
function startAnimationRecording() {
  recordingChunks = [];
  recorder.start();
  // Capture frames at 30 FPS
  const frameCaptureInterval = setInterval(captureFrame, 1000/30);
  
  // Stop recording when your animation finishes
  // Replace 5000 with your animation's total duration in milliseconds
  setTimeout(() => {
    recorder.stop();
    clearInterval(frameCaptureInterval);
  }, 5000);
}

// Trigger recording when the page loads (or add a button to start manually)
window.addEventListener('load', startAnimationRecording);

Important Adjustments for Your Work #

• Animation duration: Replace 5000 in the setTimeout with the actual total length of your SVG animation (check your keyframe timings or SMIL durations to get this right).
• Frame rate: If you want smoother playback, change 30 in captureStream(30) to 60.
• CSS animation compatibility: Since your animation uses CSS transforms and keyframes, the captureFrame function will grab the latest state of the SVG each frame—this should work perfectly for your setup.

For MOV Format #

If you need a MOV file later, convert the recorded WebM using FFmpeg with this terminal command:

ffmpeg -i my-svg-animation.webm -c:v prores_ks -profile:v 3 -c:a pcm_s16le my-svg-animation.mov

This method should capture your animation flawlessly. If you run into sync issues, double-check that the canvas dimensions match your SVG’s viewBox and that the timeout duration aligns exactly with your animation’s length.

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