SVG ist besser als Canvas

[Matthias Scharwies]

Servus!

Ich hab auch mit canvas angefangen und bin erst später auf SVG umgestiegen.

Glaub mir es ist genial.

Nutz die Feiertage und lies dich in SVG ein:

• zum Orientieren die Blog-Serie: SVG - ein Format für alle Fälle

• praktischer Einstieg: SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen

Wie Gunnar schon sagt, benötigst Du für die linke Uhr nur 2 Kreise und 2 Text-Elemente:

<circle cx="100" rx="100" r="70" />
<circle cx="100" rx="100" r="50" />
<text x="100" y="50" font-size="24">04</text>
<text x="100" y="70" font-size="16" >January</text>

(Warum hat das Bsp keine Live-Uhr?)

Die Randlinien kannst du mit stroke-dasharray als durchgezogene (Standard) oder gestrichelte Linie festlegen. Das kannst du dann mit CSS-Animation oder JavaScript animieren.

hier ein Beispiel für Text.

SVG kann wie HTML ids und Klassen haben, mit denen Du CSS und JS anhängen kannst. Das ist keine große Umstellung.

Herzliche Grüße

Matthias Scharwies