使用MediaRecorder录制SVG淡入动画失败，求可行解决方案

问题根源 #

你遇到的问题本质是：

• CSS类动画（animate.css）属于浏览器样式层的动态变化，svg-to-video这类工具通过静态渲染SVG到Canvas的方式录制，无法捕获CSS驱动的属性变化。
• 之前尝试的SVG动画可能存在语法错误（比如初始opacity="undefined"无效），导致未生效。

下面提供两种简单可行的方案，确保动画能被录制工具捕获并导出为MP4。

方案一：使用SVG原生SMIL动画（推荐） #

SVG内置的SMIL动画是嵌入在SVG结构中的，会被Canvas渲染引擎直接解析，录制工具能正常捕获动画过程。

修改你的SVG代码，给需要淡入的元素添加<animate>标签：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<script src="https://unpkg.com/svg-to-video"></script>

<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <rect stroke-width="0" id="svg_1" height="346.66667" width="460.66667" y="-50" x="-98.00001" stroke="#000" fill="#111727"/>
  <!-- 第一个文本的淡入动画 -->
  <text transform="matrix(0.426888 0 0 0.426888 34.8669 112.953)" fill="#ffffff" stroke-width="0" x="15.33662" y="-26.5367" id="svg_3" font-size="61" font-family="'Outfit Light'" text-anchor="start" xml:space="preserve" font-style="normal" font-weight="bold" stroke="#000" opacity="0">
    Lorem ipsum dolor
    <animate attributeName="opacity" from="0" to="1" begin="1s" dur="1s" fill="freeze" />
  </text>
  <!-- 第二个文本的淡入动画 -->
  <text transform="matrix(0.426888 0 0 0.426888 34.8669 112.953)" fill="#ffffff" stroke-width="0" x="96.94884" y="45.50341" id="svg_2" font-size="61" font-family="'Outfit Light'" text-anchor="start" xml:space="preserve" font-style="normal" font-weight="bold" stroke="#000" opacity="0">
    sit amet cons
    <animate attributeName="opacity" from="0" to="1" begin="1s" dur="1s" fill="freeze" />
  </text>
 </g>
</svg>

let svg = document.querySelector('svg')

svgToVideo.init({
  drawScene: () => svg,
  width: 600,
  height: 500,
  // 可选：设置录制时长，确保覆盖动画周期
  duration: 5
})

• begin="1s"：延迟1秒开始动画
• dur="1s"：动画持续1秒
• fill="freeze"：动画结束后保持最终状态

方案二：JavaScript控制动画属性（灵活度更高） #

如果需要更复杂的动画逻辑，可以通过svgToVideo的drawScene回调，每一帧手动更新元素的属性，确保录制工具能捕获到动态变化：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<script src="https://unpkg.com/svg-to-video"></script>

<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <rect stroke-width="0" id="svg_1" height="346.66667" width="460.66667" y="-50" x="-98.00001" stroke="#000" fill="#111727"/>
  <text class="text-animate" transform="matrix(0.426888 0 0 0.426888 34.8669 112.953)" fill="#ffffff" stroke-width="0" x="15.33662" y="-26.5367" id="svg_3" font-size="61" font-family="'Outfit Light'" text-anchor="start" xml:space="preserve" font-style="normal" font-weight="bold" stroke="#000" opacity="0">Lorem ipsum dolor</text>
  <text class="text-animate" transform="matrix(0.426888 0 0 0.426888 34.8669 112.953)" fill="#ffffff" stroke-width="0" x="96.94884" y="45.50341" id="svg_2" font-size="61" font-family="'Outfit Light'" text-anchor="start" xml:space="preserve" font-style="normal" font-weight="bold" stroke="#000" opacity="0">sit amet cons</text>
 </g>
</svg>

let svg = document.querySelector('svg')
const textElements = document.querySelectorAll('.text-animate')
let startTime = null

svgToVideo.init({
  drawScene: (time) => {
    if (!startTime) startTime = time
    const elapsed = time - startTime
    
    // 延迟1秒后开始淡入，持续1秒
    if (elapsed >= 1000 && elapsed <= 2000) {
      const progress = (elapsed - 1000) / 1000
      textElements.forEach(el => el.setAttribute('opacity', progress))
    } else if (elapsed > 2000) {
      textElements.forEach(el => el.setAttribute('opacity', 1))
    }
    return svg
  },
  width: 600,
  height: 500,
  duration: 5
})

这种方式通过每一帧计算动画进度，直接修改SVG元素的opacity属性，录制工具会同步捕获到每帧的状态变化。

额外提示 #

• 确保录制时长（duration）覆盖整个动画周期，避免动画未完成就停止录制。
• 如果svg-to-video仍有问题，可以尝试使用RecordRTC配合html2canvas的组合，原理是将SVG转为Canvas后录制Canvas流，兼容性更好。

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