Javascript 动态的，具有依赖性的多边形-html5中的svg

我尝试创建多边形作为菜单（）的背景，它应该缩放（响应设计）

我是否需要监听大小更改并使用javascript更改主菜单多边形元素的点？也许有更好、更干净的css实现

请注意，我将使用引导。菜单应该从引导主容器左侧大约50px开始，从引导主容器右侧大约50px结束

<div style="width: 1138px; height: 555px">
    <img src="example-picture1.jpg"
</div>

<svg width="1300" height="200" id="main_menue_svg">
    <polygon id="main_menue_polygon" points="0,0 33,33 0,66 1244,66 1211,33 1244,0 0,0"
    style="fill:rgb(51, 76, 25);stroke:rgb(51, 76, 25);stroke-width:0;fill-rule:evenodd;" />
</svg>

---

您可以使用边界框设置svg的宽度/高度和viewBox。下面的示例使用多边形，并响应窗口大小和大小

调整多边形大小
//--onload，onresize----
函数resizePolygon（）
{
var mySVG=document.getElementsByTagName（“svg”）[0]
var svgW=窗内宽度
var svgH=window.innerHeight
var bb=mySVG.getBBox（）
var bbx=bb.x//300
变量bby=bb.y
var bbw=bb.width
var bbh=bb.高度
mySVG.setAttribute（“视图框”，bbx+“”+bby+“”+bbw+“”+bbh）
mySVG.setAttribute（“宽度”，svgW）
mySVG.setAttribute（“高度”，svgH）
}
调整多边形的大小（）//---初始化窗口---
document.addEventListener（“onload”，resizePolygon（），false）
window.onresize=调整多边形大小

谢谢。但高度不应缩放，大小应取决于引导容器的大小。它的最大值约为1140，如果窗口较小，则可按比例缩小。。。