Центр Lottie SVG к элементу Header - PullRequest
Новая
       14

Центр Lottie SVG к элементу Header

0 голосов
/ 27 марта 2019

У меня есть анимация от Lottiefiles (в формате JSON), которая затем преобразуется в анимированный SVG-документ с помощью фреймворка Lottie. Однако я не могу разместить SVG-документ с тегом заголовка. Я хотел бы, чтобы это было рядом с текстом.

Я пытался искать в существующих темах похожие вещи, но ни одна из них не работала, кроме одной (вроде). Это включало добавление SVG в div внутри самого заголовка. Однако, когда я попытался это сделать, документ SVG зафиксирован на месте, поэтому, хотя он работал для более короткого текста (менее 6 символов), если текст был длиннее, SVG отображался бы внизу, а не перемещался в конец текста. ,

Я также должен вручную назначить стиль SVG-файлу через Javascript за тайм-аут, поскольку документ SVG изначально не существует.

Это фактический код заголовка (в PugJS). 

 h1(class="channel-header" style="margin-bottom: 36px; width: 96px; margin: auto;") #{channel}
            if premium
                div(id="bodyanim" class="badge baseline")

Вот SASS для заголовка и внутреннего тега div: 

.badge
  display: inline-flex
  align-self: center
  height: 70%

.badge svg, .badge img
  height: 1em
  width: 1em
  fill: currentColor
  z-index: -1
  position: absolute
  left: 0
  top: 0


.badge.baseline svg, .badge img
  top: .125em
  position: relative

.channel-header
  margin: 0 0 16px 0
  padding: 0
  line-height: 1
  font-weight: normal
  position: relative
  height: 45px

А вот JS, устанавливающий объект SVG и устанавливающий его CSS после истечения времени ожидания. 

var animData = {
    wrapper: document.getElementById('bodyanim'),
    animType: 'svg',
    loop: true,
    prerender: true,
    autoplay: true,
    path: '/anims/4768-trophy.json'
};

var anim = bodymovin.loadAnimation(animData);

setTimeout(function () {
    var svg = animData.wrapper.getElementsByTagName("svg")[0];
    svg.style.position = "absolute";
    svg.style.left = "0";
    svg.style.top = "0";
    svg.style.zIndex = -1;
    svg.style.marginLeft = "65%";

}, 100);

Когда я запускаю сайт с этим кодом, заголовок работает для любого текста короче 7 символов, но если его больше, заголовок пытается «протолкнуть» себя выше документа SVG, и вместо этого SVG остается на своем месте. двигаться вместе с текстом. Вы можете увидеть пример этого на этом сайте (вы можете либо отредактировать конечную точку, т.е. / channel / что-нибудь здесь или отредактировать тег на стороне клиента):

http://themadgamers.co.uk:3000/channel/ItsMike

1 Ответ

0 голосов
/ 28 марта 2019

Почему вы устанавливаете фиксированную ширину для h1? 

 h1(class="channel-header" style="margin-bottom: 36px; width: 96px; margin: auto;")

Если вы уберете ограничение ширины 96px, более длинные строки больше не будут перемещать трофей ниже имен пользователей.

enter image description here

Что касается руководства, необходимо ввести SVG через JavaScript ... 

setTimeout(function () {
  var svg = animData.wrapper.getElementsByTagName("svg")[0];
  svg.style.position = "absolute";
  svg.style.left = "0";
  svg.style.top = "0";
  svg.style.zIndex = -1;
  svg.style.marginLeft = "65%";
}, 100);

Попробуйте добавить новый class к вашему CSS. 

.mySvg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  margin-left: 65%;
}

Тогда вы сможете упростить JavaScript до: 

setTimeout(function () {
  var svg = animData.wrapper.getElementsByTagName("svg")[0];
  svg.className = "mySvg";
}, 100);
...