依存関係のポリゴン - html5のsvg

縮尺（応答性の高いデザイン）のメニュー（please see this attachment）の背景としてポリゴンを作成しようとしています。依存関係のポリゴン - html5のsvg

javascriptを使用してmain_menue_polygonポリゴン要素のサイズ変更やポイントを変更する必要がありますか？おそらく、より良い、よりクリーンな実装の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>

出典

2017-03-26 borecki

境界ボックスを使用して、svgの幅/高さとviewBoxを設定できます。以下の例では、ポリゴンを使用し、ウィンドウのサイズに応じてサイズを変更します。

<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 
    <title>Resize Polygon</title> 
 
</head> 
 

 
<body> 
 
<svg style='position:absolute;top:0px;left:0px;' > 
 
    <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> 
 

 
<script> 
 
//--onload, onresize---- 
 
function resizePolygon() 
 
{ 
 
    var mySVG=document.getElementsByTagName("svg")[0] 
 
    var svgW=window.innerWidth 
 
    var svgH=window.innerHeight 
 
    var bb=mySVG.getBBox() 
 
    var bbx=bb.x//-300 
 
    var bby=bb.y 
 
    var bbw=bb.width 
 
    var bbh=bb.height 
 

 
     mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh) 
 
     mySVG.setAttribute("width",svgW) 
 
     mySVG.setAttribute("height",svgH) 
 
} 
 
resizePolygon(); //---init window--- 
 
document.addEventListener("onload",resizePolygon(),false) 
 
window.onresize=resizePolygon</script> 
 

 
</body> 
 

 
</html>

出典

2017-03-26 17:18:52

感謝。しかし、高さは拡大してはならず、サイズはブートストラップのコンテナサイズに依存する必要があります。それは最大約1140であり、ウィンドウが小さくなると縮小します... – borecki

依存関係のポリゴン - html5のsvg

答えて

関連する問題