Адаптация / обрезка анимированных SVG в зависимости от соотношения сторон - PullRequest
Новая
       42

Адаптация / обрезка анимированных SVG в зависимости от соотношения сторон

0 голосов
/ 06 июня 2019

Я не нахожу способ правильно обрезать мое изображение SVG. example

Во-первых, я новичок.

Я попытался поиграться в css с абсолютной / относительной позицией, но тот факт, что этот svg анимирован с помощью gsap, делает меня неспособным загрузить svg в качестве фонового изображения в css.

Я также пытался изменить параметры viewbox, но решение кажется немного сложным. Интересно, может ли это быть отзывчивым? 

<div class="wrapper">
   <div class="nav-bar>
      "a nav bar here"
   </div>

   <div class="animatedSvg">
      <svg>
        the long svg code here of my fancy animated gsap.
      </svg>
   </div>
</div>

Css: elements are using flexbox for placement and sizing.
html, body{
    margin: 0;
    height: 100%;
}
.wrapper{
    display: flex;
    flex-direction: column;
    height: 100
}
.nav-bar{
display: flex;
    flex-direction: column;
}
.animatedSvg{
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    background-color: black;
}

Я начинаю задумываться, можно ли это исправить, только управляя viewBox с помощью некоторого javascript?

1 Ответ

0 голосов
/ 06 июня 2019

Получается, что ответ был в переборе с высотой, шириной и встроенным параметром svg preserveAspectRatio!

С этими параметрами во встроенном коде svg все теперь работает так, как должно:) 

`height="100%"
width="auto"
preserveAspectRatio="xMidYMin slice"`
...