SVG 不适合容器的大小

Question

我试图从头开始创建一个 svg 以制作一个很酷的笔划线动画，问题是我创建的形状超出了视图屏幕并且不容易操作。

我想看到完整的 svg，不管屏幕有多大。

<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>

代码笔：

https://codepen.io/maxdnc/pen/yLxpOgr

我尝试 viewbox 0 0 100 100

Answer 1

路径（BBox）的宽度为 1000，高度为 232.2。它被放置在 x = 0 和 y = 187.5 处。所以，对于 100x100 的 viewBox 来说，这太过分了。

viewBox 应该是 1000x420.

<div class="loader">
  <svg class="line-a" viewBox="0 0 1000 420">
    <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>