mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.3 KiB
42 lines
1.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<script src="../dist/hammer.js"></script>
|
|
<script src="../dist/svg-pan-zoom.js"></script>
|
|
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
|
|
|
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
|
|
</head>
|
|
|
|
<body style="width: 100%; height: 100%">
|
|
<h1>Demo for svg-pan-zoom: Resize SVG container on page resize</h1>
|
|
<div id="container" style="width: 95%; height: 80%; border:1px solid black; ">
|
|
<svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: 100%; height: 80%; " version="1.1">
|
|
<g id="g444" fill="none">
|
|
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<script>
|
|
// Don't use window.onLoad like this in production, because it can only listen to one function.
|
|
window.onload = function() {
|
|
var panZoom = window.panZoom = svgPanZoom('#demo-tiger', {
|
|
zoomEnabled: true,
|
|
controlIconsEnabled: true,
|
|
fit: 1,
|
|
center: 1
|
|
});
|
|
|
|
$(window).resize(function(){
|
|
panZoom.resize();
|
|
panZoom.fit();
|
|
panZoom.center();
|
|
})
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|