如何修改Lottie Player内部SVG的preserveAspectRatio属性

问题背景 #

我通过Lottie Player嵌入Lottie JSON文件，无法访问原始SVG文件，仅持有该JSON文件。希望将SVG的preserveAspectRatio属性从xMinYMin meet修改为xMinYMax meet，但尝试过的方法均无效——包括在<lottie-player>标签上直接设置该属性，以及通过JS选择SVG元素修改属性都没成功。

解决方案 #

问题核心在于Lottie Player会在动画渲染周期中持续重置SVG属性，单次修改无法持久生效。以下是两种可靠的解决方法：

方法一：修改Lottie核心实例的渲染配置 #

直接从Lottie的核心实例入手，修改渲染器的默认配置，从根源上指定preserveAspectRatio值，这是最优方案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
<style>
    body{
        padding: 0; margin: 0;
    }
    div{
        max-width: 1000px;
        margin: auto;
        width: 100%; background: red;
        height: 700px;
    }
</style>
</head>
<body>
    <div>
        <lottie-player autoplay loop mode="normal" style="width: 100%;">
        </lottie-player>
    </div>

    <script>
        const player = document.querySelector("lottie-player");
        player.load("./graduation-hd.json");

        player.addEventListener('ready', function(){
            // 获取Lottie的核心实例
            const lottieInstance = player.getLottie();
            // 配置渲染器的preserveAspectRatio属性
            lottieInstance.rendererSettings.preserveAspectRatio = 'xMinYMax meet';
            // 强制触发重新渲染，让配置生效
            lottieInstance.resize();
        });
    </script>
</body>
</html>

方法二：用MutationObserver监听并修正属性 #

如果方法一无效（比如使用的Lottie Player版本不支持修改rendererSettings），可以通过监听SVG属性变化，在属性被重置时强制修正。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
<style>
    body{
        padding: 0; margin: 0;
    }
    div{
        max-width: 1000px;
        margin: auto;
        width: 100%; background: red;
        height: 700px;
    }
</style>
</head>
<body>
    <div>
        <lottie-player autoplay loop mode="normal" style="width: 100%;">
        </lottie-player>
    </div>

    <script>
        const player = document.querySelector("lottie-player");
        player.load("./graduation-hd.json");

        player.addEventListener('ready', function(){
            const $svg = document.querySelector('lottie-player svg');
            // 初始设置目标属性
            $svg.setAttribute('preserveAspectRatio', 'xMinYMax meet');
            
            // 创建监听器，监控SVG属性变化
            const observer = new MutationObserver((mutations) => {
                mutations.forEach(mutation => {
                    if (mutation.attributeName === 'preserveAspectRatio') {
                        const currentVal = $svg.getAttribute('preserveAspectRatio');
                        if (currentVal !== 'xMinYMax meet') {
                            $svg.setAttribute('preserveAspectRatio', 'xMinYMax meet');
                        }
                    }
                });
            });

            // 启动监听
            observer.observe($svg, { attributes: true });
        });
    </script>
</body>
</html>

说明 #

• 方法一通过修改Lottie的核心配置生效，无需持续监听，性能更优。
• 方法二是兜底方案，适合特殊版本或场景下使用，能确保属性始终符合需求。

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