如何设置SVG多边形在任何屏幕分辨率上完全拉伸？

Question

我需要创建多边形，它将响应任何屏幕分辨率，并且它将始终完全拉伸到屏幕。

我从 this demo 开始，但正如您所看到的那样，只有固定宽度（1000px）的屏幕才会令人担忧。

是否可以设置百分比单位的多边形坐标，或者有其他方法可以实现这一点吗？

Answer 1

您需要设置一个viewBox而不是固定的宽度和高度。

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 20" preserveAspectRatio="none" width="100%" height="100%">

  <polygon points="0,0  1000,0  500,20"
         style="fill:#cc3333;"/>

</svg>