javascript - 将 Lottie SVG 居中到标题元素

Question

我有一个来自 Lottiefiles 的动画(JSON 格式)，然后由 Lottie framwork 将其转换为动画 SVG 文档。但是，我似乎无法使用 header 标记定位 SVG 文档。我希望它在文本旁边。

我试图在现有线程中搜索类似的东西，但除了一个(某种)之外，这些都没有用。这包括将 SVG 添加到标题本身内的 div 中。但是，当我尝试这样做时，SVG 文档固定在适当的位置，因此虽然它适用于较短的文本(少于 6 个字符)，但如果文本较长，SVG 将出现在下方，而不是移动到文本的末尾.

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

这是实际的 header 代码(在 PugJS 中)。

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

这是 header 和内部 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);

当我使用此代码运行网站时， header 适用于任何短于 7 个字符的文本，但如果有更多字符， header 会尝试将自身“推”到 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 宽度限制，更长的字符串将不再将奖杯推到用户名下方。

至于手册需要通过 JavaScript 来设置 SVG 的样式...

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);

考虑向您的 CSS 添加一个新的 class。

.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);