blob: bfcf3ef76f0885b615bedf57aa90809b14515f1f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SVG Element Pan & Zoom Demo</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--<object type="image/svg+xml" data="assets/images/image.svg"></object>-->
<svg viewBox="-200 -150 400 300">
<defs>
<circle id="zoom-marker" cx="0" cy="0" r="30" fill="maroon" />
<circle id="pan-marker" cx="0" cy="0" r="20" fill="darkgray" />
</defs>
<g class="pan-zoom">
<use id="zm-1" href="#zoom-marker" x="-50" y="-50" />
<use id="zm-2" href="#zoom-marker" x="-50" y="50" />
<use id="zm-3" href="#zoom-marker" x="50" y="-50" />
<use id="zm-4" href="#zoom-marker" x="50" y="50" />
</g>
<g class="pan">
<use id="pm-1" href="#pan-marker" x="-50" y="-50" />
<use id="pm-2" href="#pan-marker" x="-50" y="50" />
<use id="pm-3" href="#pan-marker" x="50" y="-50" />
<use id="pm-4" href="#pan-marker" x="50" y="50" />
</g>
<g>
<!--<circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/>-->
<circle cx="0" cy="0" r="1" fill="white" />
</g>
</svg>
<script src="app.js"></script>
</body>
</html>
|