html - 如何使 <svg> 100% 宽度

Question

我正在尝试制作这个 <svg>元素拉伸(stretch)到屏幕宽度的 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>