Issues with SVG Scaling across devices/screen sizes

Question

I attempting to create an 'abnormal' polygon that covers a section of my page using the SVG tag. However, when I scale the page, the object disappears from view. How do I make the SVG remain visible when scaling?

Cheers

 .about { /* Keeps the div fixed in one position */ position: fixed; /* Removes White surrounding boxes */ padding: 0; margin: 0; top: 0; left: 0; /* Sets the Width and height of the div, and the background colour */ width: 100vw; height: 100vh; background: #141311; } svg { width: 100vw; height: 100vh; }

 <div class="about"> <svg height="100%" width="100%"> <path d="M1000 0 L1280 0 L1280 700 L900 700 Z" fill="#FEFEFA" /> </svg> </div>

Answer 1

This can be accomplished with a bit of javascript to resize its width/height and its viewBox value. See the example below.

 <head> <title>Untitled</title> <style type="text/css"> <!-- .about { /* Keeps the div fixed in one position */ position: fixed; /* Removes White surrounding boxes */ padding: 0; margin: 0; top: 0; left: 0; /* Sets the Width and height of the div, and the background colour */ width: 100vw; height: 100vh; background: blue; } --> </style> </head> <body> <div class="about"> <svg> <path d="M1000 0 L1280 0 L1280 700 L900 700 Z" fill="red" /> </svg> </div> </body> <script> //--onload, onresize---- function sizeFull() { var mySVG=document.getElementsByTagName("svg")[0] var svgW=window.innerWidth var svgH=window.innerHeight var bb=mySVG.getBBox() var bbx=bb.x 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) } sizeFull(); //---init window--- document.addEventListener("onload",sizeFull(),false) window.onresize=sizeFull </script>

Issues with SVG Scaling across devices/screen sizes

Question

1 answers

solution1
0 ACCPTED 2016-07-05 15:23:14

Issues with SVG Scaling across devices/screen sizes

Question

1 answers

solution1 0 ACCPTED 2016-07-05 15:23:14

solution1
0 ACCPTED 2016-07-05 15:23:14