如何使<svg> 100％宽度

Question

我正在尝试将此<svg>元素拉伸到屏幕宽度的100％：

  <svg height="100" width="100">
   <path d="M0 0 L100 0 L50 100 Z" />
  </svg>

我需要做什么？

Answer 1

viewBox定义了您可以看到的坐标。高度和宽度定义SVG的大小。 E.g。

html, body {
  width: 100%;
  height: 100%;
}

<svg height="100%" width="100%" viewBox="0 0 100 100"  preserveAspectRatio="none">
   <path d="M0 0 L100 0 L50 100 Z" />
</svg>