SVG无法适配容器尺寸，求实现全屏幕自适应完整显示方案

从零开始创建了一个SVG，打算实现描边动画，但当前图形超出了可视区域，操作不便。希望SVG能自适应任意屏幕尺寸完整显示，尝试过设置viewBox="0 0 100 100"但无效。相关代码如下：

<div class="loader">
  <svg class="line-a" width="100%" height="100%">
    <path
      d="M 0 350 C 50 300 100 250 250 350 C 450 450 600 450 600 300 C 600 150 400 150 400 300 C 400 450 550 450 750 250 C 850 150 950 200 1000 250"
      fill="currentColor"
      stroke="black" />
  </svg>
</div>

要让SVG自适应屏幕完整显示，核心是正确设置viewBox属性，步骤如下：

• 计算路径的实际边界
  观察path的坐标范围：x轴从0到1000，y轴从150到450。因此viewBox的参数应为min-x min-y width height，即0 150 1000 300（width=1000-0=1000，height=450-150=300），这个值能完整包裹整个路径。

• 配置缩放规则
  添加preserveAspectRatio属性控制缩放行为：

  • 默认值xMidYMid meet：保持SVG原有比例，完整显示在容器内，不会出现裁剪
  • 若需要拉伸填充整个容器，可设为none（但会导致图形变形）

• 确保父容器有合适尺寸
  给.loader设置宽高，比如让它占满整个视口：

  .loader {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  

修改后的完整代码：

<div class="loader">
  <svg class="line-a" width="100%" height="100%" viewBox="0 150 1000 300" preserveAspectRatio="xMidYMid meet">
    <path
      d="M 0 350 C 50 300 100 250 250 350 C 450 450 600 450 600 300 C 600 150 400 150 400 300 C 400 450 550 450 750 250 C 850 150 950 200 1000 250"
      fill="currentColor"
      stroke="black" />
  </svg>
</div>

<style>
.loader {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

设置完成后，SVG会自动缩放以适配不同屏幕尺寸，完整显示图形，后续也能正常添加描边动画效果。

内容的提问来源于stack exchange，提问作者mdnc