为什么Lottie在其父div之外返回SVG？

Question

我被困住了，整整一整天都在这个问题上。基本上，我正在尝试使用Lottie在我的网站中实现动画。我的动画格式是1080 * 1920。问题是，给定div，并带有：

width: auto; height: auto;或width: 100%; height: 100%;

导出的动画始终大于封闭的父级。此问题特别是在智能手机尺寸屏幕上出现。我尝试更改所有参数，均未成功。我什至触摸过Java脚本代码，在Lottie中，您可以指定渲染的选项：

您可以在此处查看动画：

animation.json

import './styles/main.scss'

const lottie = require('lottie-web')
const bodymovin = require('bodymovin')

var svgContainer = document.getElementById('homeSection');

var animData = {
    container: svgContainer,
    renderer: 'svg',
    loop: false,
    autoplay:true,
    path: 'PhoneRotate.json'
};


var anim = lottie.loadAnimation(animData);

@import "~bootstrap/scss/bootstrap";

html, body {
  background-color: #000;
  overflow: scroll;
}

.section1{
  background-color: black;
  width: 100%;
  height:100%;
}

.section2{
  background-image: radial-gradient(farthest-side at 0 100%,rgba(69,134,247,.3),rgba(69,134,247,0)),radial-gradient(farthest-side at  100% 100% ,rgba(60,221,221,.4),rgba(60,221,221,0)),radial-gradient(farthest-side at 100% 50%,rgba(98,217,245,.1),rgba(98,217,245,0));
  width: 100%;
  height:100%;
}

.section3{
background-image: radial-gradient(farthest-side at 0 0,rgba(69,134,247,.3),rgba(69,134,247,0)),radial-gradient(farthest-side at 100% 0,rgba(60,221,221,.4),rgba(60,221,221,0)),radial-gradient(farthest-side at 50% 50%,rgba(98,217,245,.1),rgba(98,217,245,0));
  width: 100%;
  height:100%;
}

#homeSection {
  height: auto;
  border-style: solid;
  border-color: yellow;
  position: absolute;
  right: 5px;
  left: 5px;
}

<div>
    <nav class="navbar navbar-expand-lg navbar-custom" >
        <a class="navbar-brand">
            <img class="logo " src="images/AM_logo.png" href="#">
        </a>
        <a class="navbar-brand" style="color: black"> Arduino Developer </a>

    </nav>
</div>


<div class="container-fluid section1" >
        <div id="homeSection">
            <div>
                <p class="text textH"> TEXT 1</p>
            </div>

            <div>
                <p class="text textT"> TEXT2</p>
            </div>
        </div>
</div>

Answer 1

已经有一段时间了，但我遇到了这个问题。 我尝试了这种解决方法，以便元素不会溢出并破坏整个布局：

#homeSection
{
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 40%; /*You can change this to fit your needs. Maybe 100%*/
  vertical-align: middle;
  overflow: hidden;
}

#homeSection > svg
{
  display: inline-block; 
  position: absolute; 
  top: 0;
  left: 0;
}

上面提到的 id 是 document.getElementById('homeSection'); 中的 id，可以在创建彩票的 html 或 js 文件中找到。