SVG滚动触发动画在Chrome/Safari正常，Firefox无法运行求助

我通过SVG路径实现了Logo的滚动触发动画，该动画在桌面及移动端的Chrome、Safari浏览器中运行顺畅，但在Firefox中完全无效果。经检查Firefox控制台，触发动画的函数已被调用且无报错，SVG校验工具也未检测出问题，已知Firefox对SVG标准遵循更严格，恳请提供解决思路。

相关代码 #

SVG代码（部分字母已隐藏以保护隐私） #

<svg id="animated_logo-0" 
    encoding="UTF-8" 
    standalone="no" 
    version="1.1"
    xmlns="http://www.w3.org/2000/svg" 
    width="163" 
    viewBox="0 0 163 28">
    <g id="layer1">
        <g id="types">
            <g id="g-first">
                <animateTransform id="animate-contract-g-first-translate-0" attributeName="transform" attributeType="XML" type="translate" from="0" to="55" dur="0.5s" repeatCount="1" fill="freeze" begin="indefinite"></animateTransform>
                <animateTransform id="animate-expand-g-first-translate-0" attributeName="transform" attributeType="XML" type="translate" from="55" to="0" dur="0.5s" repeatCount="1" fill="freeze" begin="indefinite"></animateTransform>
                <path id="type-E1" d="m 0,5 v 22.4 h 14.016 v -2.4 h -11.456 v -7.776 h 10.528 v -2.368 h -10.528 v -7.456 h 11.296 v -2.4 z"></path>
            </g>
            <g id="g-7" fill-opacity="1">
                <animate id="animate-contract-g-7-opacity-0" attributeName="fill-opacity" begin="indefinite" dur="0.5s" from="1" to="0" fill="freeze"></animate>
                <animate id="animate-expand-g-7-opacity-0" attributeName="fill-opacity" begin="indefinite" dur="0.5s" from="0" to="1" fill="freeze"></animate>
                <path id="type-M" d="m 32.70397,27.432 v -22.464 h 2.624 l 8.288,18.784 8.064,-18.784 h 2.592 v 22.464 h -2.496 v -16.672 l -7.264,16.896 h -1.824 l -7.456,-16.896 v 16.672 z"></path>
                <path id="type-E2" d="m 59.71192,5 v 22.4 h 14.016 v -2.4 h -11.456 v -7.776 h 10.528 v -2.368 h -10.528 v -7.456 h 11.296 v -2.4 z"></path>
                <path id="type-N" d="m 118.17578,27.4 v -22.4 h 2.912 l 11.968,18.464 v -18.464 h 2.592 v 22.4 h -2.848 l -12.032,-18.272 v 18.272 z"></path>
            </g>
            <g id="g-last" transform="translate(0)">
                <animateTransform id="animate-contract-g-last-translate-0" attributeName="transform" attributeType="XML" type="translate" from="0" to="-55" dur="0.5s" repeatCount="1" fill="freeze" begin="indefinite"></animateTransform>
                <animateTransform id="animate-expand-g-last-translate-0" attributeName="transform" attributeType="XML" type="translate" from="-55" to="0" dur="0.5s" repeatCount="1" fill="freeze" begin="indefinite"></animateTransform>
                <path id="type-O" d="m 150.94376,4.392 c -6.592,0 -10.976,4.672 -10.976,11.648 0,7.136 4.352,11.936 10.976,11.936 6.656,0 11.04,-4.8 11.04,-11.936 0,-6.976 -4.416,-11.648 -11.04,-11.648 z m -8.192,11.648 c 0,-5.536 3.264,-9.152 8.192,-9.152 4.96,0 8.256,3.616 8.256,9.152 0,5.696 -3.296,9.44 -8.256,9.44 -4.928,0 -8.192,-3.744 -8.192,-9.44 z"></path>
            </g>
        </g>
        <g id="g-dash" fill-opacity="0">
            <animate id="animate-contract-g-dash-opacity-0" attributeName="fill-opacity" begin="indefinite" dur="0.5s" from="0" to="1" fill="freeze"></animate>
            <animate id="animate-expand-g-dash-opacity-0" attributeName="fill-opacity" begin="indefinite" dur="0.5s" from="1" to="0" fill="freeze"></animate>
            <animateTransform id="animate-contract-g-dash-translate-0" attributeName="transform" attributeType="XML" type="translate" from="0" to="55" dur="0.5s" repeatCount="1" fill="freeze" begin="indefinite"></animateTransform>
            <animateTransform id="animate-expand-g-dash-translate-0" attributeName="transform" attributeType="XML" type="translate" from="55" to="0" dur="0.5s" repeatCount="1" fill="freeze" begin="indefinite"></animateTransform>
            <rect id="Dash" x="22" y="0" width="11.456" height="2.4"></rect>
        </g>
    </g>
</svg>

滚动触发动画的函数 #

function triggerAnimationTag(svg, animationId) {
  console.log(`trigger animation ${animationId} for svg id: ${svg.id}`);
  let animation = svg.getElementById(animationId);
  animation.beginElement();        
}

Firefox控制台输出 #

trigger animation animate-contract-g-first-translate-0 for svg id: animated_logo-0

排查思路 #

• 调整attributeType属性：动画中使用了attributeType="XML"，对于SVG的transform属性，Firefox可能更兼容attributeType="CSS"或省略该属性（SVG 1.1默认值为XML，但部分场景下CSS类型处理更一致），可以尝试移除该属性或改为attributeType="CSS"测试。
• 检查初始属性与动画的冲突：比如g-last元素本身设置了transform="translate(0)"，可能影响动画的transform生效，尝试去掉元素上的初始transform，将初始状态整合到动画的from值中。
• 测试fill="freeze"兼容性：暂时移除fill="freeze"，观察动画是否能正常运行，再逐步调整该属性的使用方式。
• 明确动画目标元素：给animateTransform添加href="#目标元素ID"（SVG 1.1需确保xlink命名空间已声明，或使用xlink:href），明确指定动画作用的元素，避免Firefox无法识别嵌套的动画目标。
• 确认SVG加载状态：确保在SVG完全加载完成后再调用动画触发函数，比如将初始化逻辑放在DOMContentLoaded事件回调中，避免因SVG未加载完成导致动画无法触发。
• 使用Firefox调试工具：在控制台执行document.getElementById('animated_logo-0').getAnimations()，查看动画对象的playState、currentTime等属性，确认动画是否真正处于激活状态。

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