위와 아래에 거대한 공간이있는 SVG 이미지 렌더링

Question

클라이언트 사이트에 대한 클릭 가능한 SVG 국가지도를 만들었으며 IOS 장치에 표시되는 방식에 몇 가지 문제가 있습니다.

Android 또는 데스크톱의 모든 브라우저에서 이미지는 아래 이미지와 같이 그 위의 옵션 메뉴를 멋지게 (세로 방향과 가로 방향으로) 배치합니다.

가로 : 세로가

:

그러나, IOS에서 SVG 이미지가 사용자를 의미 픽셀의 100 년대의 마진이나 패딩을 갖고있는 것 같아요 정말 지금까지 아래로 스크롤합니다 그것을 볼 페이지. IOS에서 SVG 이미지를 렌더링 할 때 문제가 발생합니까 (해당되는 경우 놀라지 않을 것입니다). 그렇다면이 문제를 다른 모든 브라우저에서 제대로 표시 할 수있는 해결 방법이 있습니까? 다음과 같이 내 SVG 태그에있는

설정은 다음과 같습니다

<svg viewBox="0 0 1056 1062" preserveAspectRatio="xMidYMid meet"> 

이 IOS 장치에서 발생하는 페이지는 다음과 같습니다

http://lostworldadventures.axumdev.com/destinations/

어떤 도움을 주시면 감사하겠습니다.

N.B. SVG는 HTML 구조에 인라인으로 내장되어 있으며 이미지 태그를 통해 렌더링되지 않습니다.

Answer 1

그래,이 문제를 해결할 수있는 1 % 해킹으로 알려진 CSS 해킹이있는 것 같습니다. 기본적으로 CSS를 사용하여 SVG 요소의 높이를 1 %로 설정하면 간격이 사라지고 SVG가 올바른 위치에 렌더링됩니다.

지금까지 모든 최신 데스크톱 및 모바일 브라우저에서이 기능을 테스트했으며 매우 효과적 인 것으로 보입니다.