Smooth-moving minutes and hour hand in svg_clock example (zauberzeug#5288)

### Motivation

Fixes zauberzeug#5265, where the hour hand jumps forward a big leap every hour.  

### Implementation

@rofln already came up with the main logic, but I :

- refined it to fix also the minutes hand, 
- implemented it with cleaner code,
- packed things up for a PR. 

Intended for @rofln to give this a shot but he declined 😭 

### Progress

- [x] I chose a meaningful title that completes the sentence: "If
applied, this PR will..."
- [x] The implementation is complete.
- [x] Pytests have been added (or are not necessary).
- [x] Documentation has been added (or is not necessary).

Author: evnchn

examples/svg_clock/main.py

@@ -10,6 +10,9 @@ def build_svg() -> str:
         Original was borrowed from https://de.m.wikipedia.org/wiki/Datei:Station_Clock.svg.
     """
     now = datetime.now()
+    seconds_angle = now.second / 60 * 360
+    minutes_angle = now.minute / 60 * 360 + seconds_angle / 60
+    hours_angle = now.hour / 12 * 360 + minutes_angle / 12
     return f'''
         <svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <circle cx="400" cy="400" r="400" fill="#fff"/>
@@ -30,13 +33,13 @@ def build_svg() -> str:
                 </g>
                 <use transform="rotate(90 400 400)" xlink:href="#d"/>
             </g>
-            <g transform="rotate({250 + now.hour / 12 * 360} 400 400)">
+            <g transform="rotate({250 + hours_angle} 400 400)">
                 <path d="m334.31 357.65-12.068 33.669 283.94 100.8 23.565-10.394-13.332-24.325z"/>
             </g>
-            <g transform="rotate({117 + now.minute / 60 * 360} 400 400)">
+            <g transform="rotate({117 + minutes_angle} 400 400)">
                 <path d="m480.73 344.98 11.019 21.459-382.37 199.37-18.243-7.2122 4.768-19.029z"/>
             </g>
-            <g transform="rotate({169 + now.second / 60 * 360} 400 400)">
+            <g transform="rotate({169 + seconds_angle} 400 400)">
                 <path d="m410.21 301.98-43.314 242.68a41.963 41.963 0 0 0-2.8605-0.091 41.963 41.963 0 0 0-41.865 42.059 41.963 41.963 0 0 0 30.073 40.144l-18.417 103.18 1.9709 3.9629 3.2997-2.9496 21.156-102.65a41.963 41.963 0 0 0 3.9771 0.1799 41.963 41.963 0 0 0 41.865-42.059 41.963 41.963 0 0 0-29.003-39.815l49.762-241.44zm-42.448 265.56a19.336 19.336 0 0 1 15.703 18.948 19.336 19.336 0 0 1-19.291 19.38 19.336 19.336 0 0 1-19.38-19.291 19.336 19.336 0 0 1 19.291-19.38 19.336 19.336 0 0 1 3.6752 0.3426z" fill="#a40000"/>
             </g>
         </svg>