Как мне заставить мои svg заполнить высоту окна, как изображения делают с этой анимацией codepen. (Гринсок Дж.С.) - PullRequest
Новая
       51

Как мне заставить мои svg заполнить высоту окна, как изображения делают с этой анимацией codepen. (Гринсок Дж.С.)

0 голосов
/ 04 ноября 2018

Я нашел этот потрясающий кодовый штырь, отправляющий облака по экрану. Вы заметите, если вы начнете с меньшей высоты, а затем увеличите ее. Облака, которые движутся по экрану, в конечном итоге будут занимать всю высоту окна. Это то, что я искал, однако в моем случае я использую 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-объекты охватывать высоту области просмотра в анимации, как это делают изображения?

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 04 ноября 2018

offsetHeight - это свойство , исключающее элементы HTML , в частности это не то, что элементы SVG имеют.

Простейшая вещь, вероятно, заключается в том, чтобы обернуть элементы <svg> в элемент html и вместо этого использовать анимацию для элемента оболочки html. Вот так ... 

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