Beispiel:SVG-Uhr-3.html
Aus SELFHTML-Wiki
<!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;
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;
}
#minutes {
stroke: var(--primarycolor);
stroke-width: 2;
transform: rotate(33deg);
}
#seconds {
stroke: var(--accent2color);
transform: rotate(9deg);
}
</style>
<title>SVG-Uhr - 3</title>
</head>
<body>
<h1>SVG-Uhr - 3</h1>
<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>
