SVG 100vh高度，自动/响应宽度？

Question

是否有一种简单的方法让div内的SVG响应父容器的高度并相应地调整宽度？

<div class="wrapper">
  <div class="svg-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512">
      <title>SVG FULL HEIGHT</title>
      <g id="Layer_2" data-name="Layer 2">
        <g id="export">
          <path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" />
        </g>
      </g>
    </svg>
  </div>
</div>

FIDDLE

Answer 1

将SVG设置为100vh。

＆＃13;

＆＃13;

    body {
      margin: 0;
      padding: 0;
    }
    
    .svg-wrap svg {
      height: 100vh;
    }
    
    .wrapper {
      background: #CCC;
    }
    
    .cls-1 {
      fill: #ffcc00;
    }

＆＃13;

<div class="wrapper">
  <div class="svg-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512">
      <title>SVG FULL HEIGHT</title>
      <g id="Layer_2" data-name="Layer 2">
        <g id="export">
          <path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" />
        </g>
      </g>
    </svg>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;