我如何让我的 svg 填充 window 高度，就像使用此 codepen 动画的图像一样。 (Greensock js)

Question

我发现这个很棒的代码笔在屏幕上发送云。如果您从较小的高度开始然后增加它，您会注意到。在屏幕上移动的云最终将跨越 window 的整个高度。这就是我一直在寻找的，但是在我的例子中，我使用的是 SVG

我想也许我必须给出所有 svg 的个人高度，但这没有用。

这是我发现的工作示例，它使用的是图像：https://codepen.io/osublake/pen/4f849ca24bb5f1050a69651a6e82f271

这是我的示例 使用 SVG https://codepen.io/PortalPacific/pen/LXYKbM

您会注意到，在我的示例中，所有元素都粘在顶部区域。虽然原始示例跨越视口的可用高度。

这是所需的代码片段。

$(window).resize(function() {
  vw = window.innerWidth;
  vh = window.innerHeight;
});

function animateCloud(cloud) {

  var height = cloud.offsetHeight * 0.5;

  TweenLite.set(cloud, {
    scale: random(0.5, 1),
    xPercent: -100,
    yPercent: -50,
    x: 0,
    y: random(height, vh - height)
  });

  TweenLite.to(cloud, random(4, 12), {
    x: vw,
    xPercent: 0,
    delay: random(2) * firstRun,
    onComplete: animateCloud,
    onCompleteParams: [cloud]
  });
}

function random(min, max) {
  if (max == null) { max = min; min = 0; }
  return Math.random() * (max - min) + min;
}

如何让我的 SVG 像图像一样跨越动画中视口的高度？

如有任何帮助，我们将不胜感激！

Answer 1

offsetHeight 是属性 exclusive to HTML elements，特别是它不是 SVG 元素所具有的东西。

最简单的方法可能是将 <svg> 元素包装在 html 元素中，然后让动画以 html 包装元素为目标。像这样...

<div class="icon cloud">
<svg>
  <use xlink:href="#donut2"></use>
</svg>
</div>

我如何让我的 svg 填充 window 高度，就像使用此 codepen 动画的图像一样。 (Greensock js)

How do i get my svg's to fill in the window height like images do with this codepen animation. (Greensock js)

jquery

svg

gsap