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
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>MediaInfo</title>
<style>
:root { color-scheme: var(--color-scheme, light); }
@media (prefers-color-scheme: dark) {
:root { --color-scheme: dark; }
}
svg > #graph0 > polygon { fill: transparent; }
svg { overflow: hidden; }
.controls { position: fixed; top: 1em; right: 1em; opacity: 0.5; border-radius: 3px; background-color: lightblue; }
</style>
</head>
<body>
<div class='controls'>
<svg onclick='zoom(-10)' width='24px' height='24px' viewBox='0 0 24 24' fill='#000000'>
<path d='M0 0h24v24H0V0z' fill='none'/>
<path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z'/>
</svg>
<svg onclick='zoom(10)' width='24px' height='24px' viewBox='0 0 24 24' fill='#000000'>
<path d='M0 0h24v24H0V0z' fill='none'/>
<path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z'/>
</svg>
</div>
<div id='svg'>
@SVG@
</div>
<script>
function zoom(value) {
var container = document.getElementById('svg');
var svgs = container.getElementsByTagName('svg');
for (var i = 0; i < svgs.length; i++) {
svgs[i].width.baseVal.value = svgs[i].width.baseVal.value * (100 + value) / 100;
svgs[i].height.baseVal.value = svgs[i].height.baseVal.value * (100 + value) / 100;
}
}
</script>
</body>
</html>
|
