전체 뷰포트의 SVG 이미지

Question

유럽의 이미지를 그리는 SVG의 꼬인 비트가 있습니다. 그것은 많은 부적절한 행위의 결과입니다. 나는 ... 그 본질에서

p27.eu

을 SVG와 아주 좋은 아니에요, 중, 코드는 이것이다 :

<script type="text/javascript"> 
<!-- compute the image dimensions, proposed code --> 
var w = window; 
var d = document; 
var e = d.documentElement; 
var g = e.getElementsByTagName('body')[0]; 
var x = w.innerWidth || e.clientWidth || g.clientWidth; 
var y = w.innerHeight|| e.clientHeight|| g.clientHeight; 
var eurlen = Math.min(x, y); 
<!-- end proposed code --> 
</script> 
<svg 
    id="europe-svg" 
    display: block 
    align: xMidYMid 
    width="300%" 
    height="300%"> 
    <g 
id="layer1" 
transform="translate(-107.76319,-174.21562)"> 
<path>...</path> <!-- one of these for each country --> 
<rect 
    style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8.37237263;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" 
    id="rect10148" 
    width="452.38409" 
    height="447.94937" 
    x="106.52205" 
    y="174.79648" /> 
    </g> 
</svg> 

나는 이미지가 전체 화면으로 표시 할. 원하는 길이를 계산할 수 있습니다 (위의 제안 된 코드 참조).

그러나 나는이 악몽 같은 가증을 뷰포트 크기로 확대하는 데 어려움을 겪고 있습니다. 첫째, 이것은 javascript 변수 값을 svg 높이/너비 및 (끝에서) rect 높이/너비에 삽입하는 방법이 명확하지 않기 때문입니다. 그러나 그 값을 수동으로 수정하면 이미지가 나에게 의미가있는 방식으로 전혀 반응하지 않기 때문입니다.

기계적으로 생성 된 SVG를 나중에 손으로 수정하여 상속하지 않도록하는 것 외에 제안 사항이 있으십니까?

Answer 1

당신이 할 필요가 단지 몇 단계는이 :

컨테이너 전체 폭과 높이를 확인합니다 SVG 전체 폭과 높이도를 만들기가, 여기에 CSS 것 : 그런 다음

#europe { 
    width: 100%; 
    height: 100%; 
} 
svg { 
    width: 100%; 
    height: 100%; 
} 

제거 svg 요소의 width 및 height 속성을 추가하고 viewBox 속성을 대신 추가하여 svg 내용과 일치 시키십시오 (도면의 크기에 대해 잘 모르겠습니다. 시작하려면 viewBox="0 0 400 400"과 같은 값을 입력하십시오). 즉 오 당신이

을 시작하는, 그리고 몸에서 마진을 제거합니다 :

body { 
    margin: 0 
}