svg-pan-zoom-m
Version:
JavaScript library for panning and zooming an SVG image from the mouse, touches and programmatically.
76 lines (64 loc) • 1.88 kB
HTML
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
<style tyle="text/css">
html,body{
width: 100%;
height: 100%;
}
#mainViewContainer {
width: 95%;
height: 95%;
border: 1px solid black;
margin: 10px;
padding: 3px;
overflow: hidden;
}
#mainView {
width: 100%;
height: 100%;
min-height: 100%;
display: inline;
}
.thumbViewClass {
border: 1px solid black;
position: absolute;
bottom: 5px;
left: 5px;
width: 20%;
height: 30%;
margin: 3px;
padding: 3px;
overflow: hidden;
}
#thumbView {
z-index: 110;
background: white;
}
#scopeContainer {
z-index: 120;
}
</style>
</head>
<body>
<div id="mainViewContainer">
<embed id="mainView" type="image/svg+xml" src="tiger.svg"/>
</div>
<div id="thumbViewContainer">
<svg id="scopeContainer" class="thumbViewClass">
<g>
<rect id="scope" fill="red" fill-opacity="0.1" stroke="red" stroke-width="2px" x="0" y="0" width="0" height="0"/>
<line id="line1" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
<line id="line2" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
</g>
</svg>
<embed id="thumbView" type="image/svg+xml" src="tiger.svg" class="thumbViewClass"/>
</div>
<script src="../dist/svg-pan-zoom.js" type="text/javascript" ></script>
<script src="./thumbnailViewer.js" type="text/javascript" ></script>
<script type="text/javascript">
thumbnailViewer({mainViewId: 'mainView',thumbViewId: 'thumbView'});
</script>
</body>
</html>