유럽의 이미지를 그리는 SVG의 꼬인 비트가 있습니다. 그것은 많은 부적절한 행위의 결과입니다. 나는 ... 그 본질에서전체 뷰포트의 SVG 이미지
을 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를 나중에 손으로 수정하여 상속하지 않도록하는 것 외에 제안 사항이 있으십니까?
보기 박스? 이미지의보기 상자를 정의하면 더 쉽습니다. 그런 다음 "wrapper"html 요소에서 css를 사용하여 크기를 조절할 수 있습니다. –
배경으로 추가하는 것이 더 쉬운 방법입니다. 또는 'svg id = "europe-svg"와 같은 작업을 수행하십시오. viewBox = "0 0 454 449"width = "100vw"height = "100vh"' 또한 InkScape와 같은 일부 그래픽 편집기에서 svg를 다시 생성합니다. –