Übung 10
14.10.2021
Schaffen Sie es, das Beispiel mit der Uhr von oben so zu erweitern, dass tatsächlich eine einfache Uhr dargestellt wird? Sie braucht keine Ziffern zu haben. Nutzen Sie die SVG-Objekte, die Sie bis jetzt kennengelernt haben.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 -15 132 130">
<g transform="translate(70 50)" id="hours">
<line stroke-width="5" x1="0" y1="0" x2="0" y2="-30"
stroke-linecap="round" stroke="green" opacity=".5" />
<animateTransform attributeName="transform" type="rotate"
repeatCount="indefinite" dur="86400s" by="360" />
</g>
<g transform="translate(70 50)" id="minutes">
<line stroke-width="4" x1="0" y1="0" x2="0" y2="-40"
stroke-linecap="round" stroke="red" opacity=".5" />
<animateTransform attributeName="transform" type="rotate"
repeatCount="indefinite" dur="3600s" by="360" />
</g>
<g transform="translate(70 50)" id="seconds">
<line stroke-width="2" x1="0" y1="0" x2="0" y2="-44"
stroke-linecap="round" stroke="blue" opacity=".5" />
<animateTransform attributeName="transform" type="rotate"
repeatCount="indefinite" dur="60s" by="360" />
<circle r="7" />
</g>
</svg>