Javascript 如何在所有设备上制作乐透动画全屏？

我有一个鼠标控制器洛蒂动画问题

因此我创造了这支笔，用来摆弄：）

目标是，乐透动画从视口的顶部到底部（减去顶部菜单），左和右应该被裁剪（不能一次显示整个动画，因此裁剪是一种自然行为）

我认为（现在仍然认为）“xMidYMax切片”是正确的方法。 我认为这是“最大限度地提高高度，左右切片”

我尝试在bodymovin渲染器设置中设置它

 var animData = {
    container: document.getElementById("sec"),
    renderer: "svg",
    prerender: true,
    loop: false,
    autoplay: false,
    offset: 500,
    rendererSettings: {
      progressiveLoad: false,
      preserveAspectRatio: "xMidYMax slice"
    },
    path:
      "https://uberserver.de/uncabka/wp-content/plugins/elementor-cabka/assets/js/animation.json"
  };

但无论我做什么，如果我调整视口的大小，它的格式都不会改变

我希望，这里有人有这种问题的经验，可以给我一个提示

提前谢谢

---

Adrian

将代码放在一个更简单的codepen版本后，我找到了解决方案

这是一个代码：

//bind the complete function to the data_ready event of bodymovin's animation loader
anim.addEventListener("data_ready", complete);

//set the attribute manually after the svg is loaded.
function complete() {
   $('#sec svg').attr('preserveAspectRatio','xMidYMax slice');
}

---

你能提供一个只有动画的最小页面吗？提供一个链接到您正在进行的工作是好的，但很难看出问题所在。这也可能有助于您限定问题的范围。谢谢你的建议。我将在帖子中更新url