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>