如何使 SVG 在 codepen.io 等网站上具有响应性？

Question

我有一个基于 SVG 的站点预加载器。 我不能让它响应。 它不假设父母的全尺寸。 我希望它按比例缩小，以便它可以根据视口的高度调整大小。 https://codepen.io/toughyear/pen/zYxWJOj

 <div >
     <svg 
          xmlns="http://www.w3.org/2000/svg"
          width="449.000000pt"
          height="470.000000pt"
          viewBox="0 0 449.000000 470.000000"
          preserveAspectRatio="xMidYMid meet"
        >
          <g
            transform="translate(0.000000,470.000000) scale(0.100000,-0.100000)"
            class="wolf-path"
          >
            <!-- path details--!>
          </g>
        </svg> 
</div>

相关的css结构是：

body {
/*code*/
}

.wolf-path {
/*code*/
}

Answer 1

您可以从 sag 元素中删除高度和宽度，并将相对于视口的高度/宽度添加到父 div

<div style="width:100vw;height:100vh;">
  <svg 
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 449.000000 470.000000"
    preserveAspectRatio="xMidYMid meet">
 ...

Answer 2

您可以将样式应用于 svg 以使用整个视口。

例子：

div svg {
  width: 100vw;
  height: 100vh;
}

修改代码笔