如何使<svg> 100%宽度

Question

我试图使这个<svg>元素拉伸到屏幕宽度的100%:

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

我需要做什么？

Answer 1

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

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>