Beispiel:SVG-Uhr-5.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <style>
svg {
--bgcolor: #fdfcf3; --primarycolor: #337599; --accent1color: #dfac20; --accent2color: #c82f04; --start-hours: 0; --start-minutes: 0; --start-seconds: 0; height: 250px;
}
- clockface {
fill: var(--bgcolor); stroke: var(--primarycolor); stroke-width: 2;
}
- indizes > use,
.hand {
stroke: var(--primarycolor); stroke-width: 1; stroke-linecap: round;
}
- indizes > use:nth-child(3n+3) {
stroke-width: 3;
}
- hours {
stroke: var(--primarycolor); stroke-width: 4; transform: rotate(calc(var(--start-hours) * 30deg)); animation: rotateHourHand calc(12 * 60 * 60s) linear infinite; animation-delay: calc(calc(var(--start-minutes) * -60 * 1s) + calc(var(--start-seconds) * -1 * 1s));
} @keyframes rotateHourHand {
from {
transform: rotate(calc(var(--start-hours) * 30deg));
}
to {
transform: rotate(calc(var(--start-hours) * 30deg + 360deg));
}
}
- minutes {
stroke-width: 2; transform: rotate(calc(var(--start-minutes) * 6deg)); animation: rotateMinuteHand 3600s steps(60) infinite; animation-delay: calc(var(--start-seconds) * -1 * 1s);
}
@keyframes rotateMinuteHand {
from {
transform: rotate(calc(var(--start-minutes) * 6deg));
}
to {
transform: rotate(calc(var(--start-minutes) * 6deg + 360deg));
}
}
- seconds {
stroke: var(--accent2color); transform: rotate(calc(var(--start-seconds) * 6deg)); animation: rotateSecondsHand 60s steps(60) infinite;
}
@keyframes rotateSecondsHand {
from {
transform: rotate(calc(var(--start-seconds) * 6deg));
}
to {
transform: rotate(calc(var(--start-seconds) * 6deg + 360deg));
}
}
</style> <script> document.addEventListener('DOMContentLoaded', function () {
const svg = document.querySelector('svg');
const currentTime = new Date();
svg.style.setProperty('--start-seconds', currentTime.getSeconds());
svg.style.setProperty('--start-minutes', currentTime.getMinutes());
svg.style.setProperty('--start-hours', currentTime.getHours() % 12);
}); </script>
<title>SVG-Uhr - 5</title>
</head>
<body>
SVG-Uhr - 5
<svg viewBox="-100 -100 200 200">
<defs> <line id="index" x1="80" y1="0" x2="90" y2="0" /> </defs> <circle id="clockface" r="98" /> <g id="indizes">
<use href="#index" transform="rotate(300)" /> <use href="#index" transform="rotate(330)" /> <use href="#index" transform="rotate(0)" /> <use href="#index" transform="rotate(30)" /> <use href="#index" transform="rotate(60)" /> <use href="#index" transform="rotate(90)" /> <use href="#index" transform="rotate(120)" /> <use href="#index" transform="rotate(150)" /> <use href="#index" transform="rotate(180)" /> <use href="#index" transform="rotate(210)" /> <use href="#index" transform="rotate(240)" /> <use href="#index" transform="rotate(270)" />
</g> <line class="hand" id="hours" x1="0" y1="0" x2="0" y2="-50" /> <line class="hand" id="minutes" x1="0" y1="0" x2="0" y2="-95" /> <g id="seconds" class="hand"> <line x1="0" y1="0" x2="0" y2="-55" />
<circle cx="0" cy="-60" r="5" fill="none" /> <line x1="0" y1="-65" x2="0" y2="-95" />
</g> <circle id="origin" r="2" />
</svg> </body> </html>
