Как заставить эти анимированные svgs Lott ie оставаться на одной высоте? - PullRequest
0 голосов
/ 01 февраля 2020

Хотелось бы узнать, как я могу сделать так, чтобы эти анимированные SVT Lott ie оставались на одной высоте в ряду, я пробовал очевидную высоту / ширину, однако это не работает, поскольку они являются анимированными SVG.

Как это: enter image description here

Спасибо

var anim7;
    var anim8 = document.getElementById('lottie10')
    var animation8 = {
        container: anim8,
        renderer: 'svg',
        loop: false,
        autoplay: false,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: false},
        path: 'https://assets2.lottiefiles.com/packages/lf20_C1zSVd.json',
        name: 'myAnimation',
    };
    anim7 = lottie.loadAnimation(animation8);

 anim7.addEventListener('complete', function(){   
    anim6.playSegments([0,139],true);
});

animContainer = document.getElementById('lottie11');

var params = {
    container: animContainer,
    renderer: 'svg',
    loop: false,
    autoplay: true,
    autoplay:false,
    autoloadSegments: false,
    path: 'https://assets6.lottiefiles.com/packages/lf20_pPIK3s.json'// path to your data.json file you rendered from AE

};

var anim11;

anim11 = lottie.loadAnimation(params);
animContainer.addEventListener("mouseover", myScript);

function myScript(){
    anim11.play();
}
.item {
  display: table-cell;
  vertical-align: top;
  padding: 7px;
}

.row {
  height: 10%;
  width: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.3/lottie.js"></script>

<div class="row">
  <div class="item">
    <div id="lottie11"></div>
  </div>
<div class="item">
    <div id="lottie10"></div>
  </div>
</div>

Хотелось бы узнать, как я могу заставить этих анимированных svgs Lott ie оставаться на одной высоте в ряду, я попробовал очевидное высота / ширина, однако, это не похоже на работу, поскольку они анимированные svgs.

Спасибо

...