根据宽高比调整/裁剪动画svg

Question

我找不到合适的方法来裁剪我的svg图像。

首先，我是新手。

我尝试摆放绝对位置/相对位置的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;
}

我开始怀疑这是否只能通过使用某些JavaScript控制viewBox来解决？

Answer 1

因此，结果证明答案是摆弄高度，宽度和内联svg选项preserveAspectRatio！

有了内嵌svg的代码中的内容，现在一切都在按需进行：）

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