65 lines
156 KiB
HTML
65 lines
156 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
|
||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
|
||
|
|
<meta http-equiv='X-UA-Compatible' content='IE=edge' >
|
||
|
|
<META NAME='Description' content='Pan and zoom svg elements demo with center-center transform origin '>
|
||
|
|
<meta name='keywords' content='svg, pan, zoom' />
|
||
|
|
<meta name='author' content='Andrei Kashcha'>
|
||
|
|
<meta name='title' content='SVG panzoom demo' />
|
||
|
|
<title>Zoom to middle demo</title>
|
||
|
|
<style type="text/css" media="screen">
|
||
|
|
body, html {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
font-family:Verdana, Geneva, Tahoma, sans-serif;
|
||
|
|
}
|
||
|
|
svg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
.header, .footer{
|
||
|
|
position: absolute;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 0;
|
||
|
|
background: rgba(255, 255, 255, 0.4);
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
max-width: 400px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: #FF4081;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
bottom: 10px;
|
||
|
|
color: rgba(0, 0, 0, 0.52);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<svg tabindex="1"> <g id='zoomable' transform="matrix(0.42790904045104977 0 0 0.42790904045104977 607.4913656616211 389.314217376709)"> <g><path stroke="#999" marker-start="url(#StartTriangle)" d="M392,487L61,388" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-94,228L-13,331" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M634,-95L561,-237"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M204,-270L506,-281"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M626,-272L570,-278" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M614,-569L550,-327"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M628,-463L561,-327"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M529,-453L536,-327"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-388,-637L-409,-629" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-314,-567L-409,-604" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-419,-742L-433,-662" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M106,-139L-409,-589"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-524,-611L-472,-615"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-307,-709L-409,-639"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-583,-362L-466,-572"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-510,-157L-447,-572"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-489,-703L-466,-662"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-204,462L-181,530" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-297,494L-198,555"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-316,401L-198,538" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-221,554L-198,563"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-205,361L-174,530"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-761,-246L-854,-305" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-508,-253L-854,-319"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-689,-425L-854,-341"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-855,-274L-858,-280" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-719,-181L-703,-111" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-693,-267L-693,-111" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-508,-218L-662,-92"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-400,-85L-662,-68"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-658,-398L-689,-111"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-382,321L-662,-27"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-527,472L-680,-21"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-297,455L-250,432" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-243,496L-232,462"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-216,361L-216,372" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-316,376L-250,404"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-348,-42L-231,372"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-314,-597L-324,-610" marker-end="url(#Triangle)"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-574,-362L-388,-607"></path><path stroke="#999" marker-start="url(#StartTriangle)" d="M-524,-616L-388,-642"></path><path stroke="#999
|
||
|
|
<p class='header'>
|
||
|
|
<code>transformOrigin: {x: 0.5, y: 0.5}</code> makes panzoom to zoom always into the middle of the screen.
|
||
|
|
</p>
|
||
|
|
<p class='footer'>
|
||
|
|
Generated by <a href='http://www.yasiv.com/#/Search?q=javascript&category=Books&lang=US'>YASIV</a>. <br />
|
||
|
|
</p>
|
||
|
|
<script src='../dist/panzoom.js'></script>
|
||
|
|
<script>
|
||
|
|
var area = document.getElementById('zoomable')
|
||
|
|
window.pz = panzoom(area, {autocenter: true, bounds: true, transformOrigin: {x: 0.5, y: 0.5}})
|
||
|
|
</script>
|
||
|
|
<a href="https://github.com/anvaka/panzoom"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
||
|
|
</body>
|
||
|
|
</html>
|