Beispiel:SVG-Uhr-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>
  <title>SVG-Uhr - 4</title>
</head>
 
<body>
  <h1>SVG-Uhr - 4</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>

Abgerufen am 25.06.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-Uhr-4.html"