How to set SVG polygon to be fully stretched on any screen resolution?

StackOverflow https://stackoverflow.com/questions/22765511

  •  24-06-2023
  •  | 
  •  

Question

i need to create polygon which will be responsive to any screen resolution and it will be always fully stretched to screen.

I started with this demo but as you can see it is woriking only for fixed width (1000px) of screen.

Is it possible to set polygon's coordinates with percentage units or is there any other way how to accomplish that?

Was it helpful?

Solution

You need to set a viewBox rather than a fixed width and height.

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top