40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
<!doctype html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
svg.keyboard {
|
|
/* height: 1000;
|
|
width: 400; */
|
|
}
|
|
.keycap_text {
|
|
fill: white;
|
|
font: normal 3px sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg class="keycaps" display="none">
|
|
<defs>
|
|
<polygon points="-3.6,-3.6 3.6,-3.6 3.6,3.6 -3.6,3.6" id="default"></polygon>
|
|
</defs>
|
|
</svg>
|
|
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 200 80" preserveAspectRatio="xMidYMid meet">
|
|
<g transform="translate(4, 4)">
|
|
<use href="#default" class="key_esc"></use>
|
|
<text class="keycap_text" color="white" dominant-baseline="middle" text-anchor="middle">CTRL</text>
|
|
</g>
|
|
<use href="#default" class="key_f1" x="16" y="4"></use>
|
|
<use href="#default" class="key_f2" x="24" y="4"></use>
|
|
<use href="#default" class="key_f3" x="32" y="4"></use>
|
|
<use href="#default" class="key_f4" x="40" y="4"></use>
|
|
<use href="#default" class="key_f5" x="52" y="4"></use>
|
|
<use href="#default" class="key_f6" x="60" y="4"></use>
|
|
<use href="#default" class="key_f7" x="68" y="4"></use>
|
|
<use href="#default" class="key_f8" x="76" y="4"></use>
|
|
</svg>
|
|
<script>
|
|
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
|
|
</script>
|
|
</body>
|
|
</html>
|