将Lottie SVG居中到Header元素

Question

我有一个来自Lottiefiles的动画（JSON格式），然后由Lottie框架将其转换为动画SVG文档。但是，我似乎无法使用header标签放置SVG文档。我希望它在文本旁边。

我试图在现有线程中搜索类似的东西，但是除了一个（某种）之外，这些都不起作用。这包括将SVG添加到标头本身内的div中。但是，当我尝试此操作时，SVG文档被固定在适当的位置，因此虽然它适用于较短的文本（少于6个字符），但如果文本较长，则SVG会显示在下方，而不是移至文本的末尾。

我还必须在超时时通过Javascript将样式手动分配给SVG文件，因为SVG文档最初并不存在。

这是实际的标头代码（在PugJS中）。

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

这是标题和内部div标签的SASS：

.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 / anythinghere 中编辑端点，也可以在客户端编辑标签）：

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

Answer 1

为什么要为h1设置固定宽度？

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

如果您取消了96px宽度限制，则更长的字符串将不再将奖杯推到用户名下方。

至于手册，则需要通过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);