SVG 이미지를 확장하여 브라우저 창을 채우는 방법은 무엇입니까?

이것은 쉬운 일인 것 같지만, 나는 단지 무언가를 얻지 못하고 있습니다.

스크롤하지 않고 가로 세로 비율을 유지하면서 브라우저 창에 맞게 자동으로 크기가 조정되는 단일 SVG 이미지가 포함 된 HTML 페이지를 만들고 싶습니다.

예를 들어, 현재 1024x768 SVG 이미지가 있습니다. 브라우저 뷰포트가 1980x1000이면 이미지가 1333x1000으로 표시되기를 원합니다 (세로 채우기, 가로 가운데에 배치). 브라우저가 800x1000이면 800x600으로 표시하고 싶습니다 (가로로 채우고 세로로 가운데에 배치).

현재 다음과 같이 정의했습니다.

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

그러나 이것은 브라우저의 전체 너비 (넓지 만 짧은 창)로 확장되고 세로 스크롤을 생성하며 이는 내가 원하는 것이 아닙니다.

내가 무엇을 놓치고 있습니까?

— Miral
소스

설명 할 수없이 인라인 스타일 속성을 헤드의 CSS 스타일 블록으로 옮기려고 시도한 후 작동했습니다. 나는 그것이 왜 차이를 만들 었는지 모르겠습니다. (오버플로를 추가해야했지만 : 숨김-그렇지 않으면 4 픽셀 세로 스크롤이있었습니다.)

— Miral

175

어때 :

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

또는:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

나는 모든 약 5 %의 패딩 불구하고, (약)이 기술을 사용하고, 사용하여 내 사이트에 예를 들어이 position:absolute대신 position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(사용 position:fixed하면 페이지의 하위 페이지 앵커에 연결하는 매우 극단적 인 시나리오를 방지 overflow:hidden할 수 있으며 스크롤 막대가 나타나지 않도록 할 수 있습니다 (추가 콘텐츠가있는 경우).

— Phrogz
소스

그리고 그 링크를 2 년 동안 떠난 것에 대한 늦은 +1.

— msanford 2013

이 솔루션은 viewBox속성에 의존 합니다.

— ubershmekel 2014

링크는 거의 4 년이 지난 후에도 여전히 존재합니다. 잘 했어, @Phrogz!

— 리처드

예, 감사합니다 @Phrogz ... 그리고 만약 다운 될 경우를 대비하여 codepen.io/cyanos/full/XbXxOQ

— Jay

그리고 8 년 넘게 +1

— Sudhir Kaushik