如何將SVG多邊形設置爲在任何屏幕分辨率上完全拉伸？

Question

我需要創建多邊形，它將響應任何屏幕分辨率，並將始終完全拉伸到屏幕。

我從開始，但正如您所看到的，它僅適用於固定寬度（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>