nicht angemeldet
Man kann eine Linie gestrichelt anzeigen und diese Strichelung exakt definieren, bspw. so:
stroke-dasharray: 5,5;
Der Dasharray gibt an, wie groß Strich und Leere sind, hier jeweils 5. Zusätzlich kann man noch bestimmen, wo diese Strichelung anfängt, bspw. so:
stroke-dashoffset: 2;
Hier wird also die Strichelung vom Anfang der Figur um 2 Einheiten versetzt angefangen.
Diese Strichelung kann animiert werden mit
<animate attributeName="stroke-dashoffset" from="3" to="0" dur="5s"/>
Um es so aussehen zu lassen, dass der Kreis gezeichnet wird, definiert man eine Strichelung, die zunächst eine Leere und dann einen Strich von genau dem Umfang des Kreises hat. Beim Kreis kann man das mit
Umfang = 2 * Radius * Pi
berechnen, ist der Radius wie im Beispiel = 200 lautet das (gerundete) Ergebnis 1257. Per dashoffset wird es nun so dargestellt, dass auf dem sichtbaren Kreis die unsichtbare Leere liegt und die Animation die "Strichelung" rein zieht:
<g style="fill-opacity:0; fill:#ffffff; stroke:#000000; stroke-width:2; stroke-dasharray: 1257,1257; stroke-dashoffset: 1257;">
<circle cx="500" cy="500" r="200"/>
<animate attributeName="stroke-dashoffset" from="1257" to="0" dur="1s" begin="0s" fill="freeze"/>
</g>
Problematisch ist dabei, dass man wissen muss, wie lang diese Linie ist. Zur Bestimmung der Länge gibt es eine SVG-Funktion:
getTotalLength()
Die kann man aber nur auf Pfade, nicht auf Polylinien (oder Kreise) anwenden, d.h. man muss jegliches Objekt per "path" erstellen und kann dann einfügen:
onload="alert(svgDocument.getElementById('pfad').getTotalLength())"
Ein Viereck wird als Pfad bspw. so definiert:
<path d="M200,110 290,200 200,290 110,200 200,110"/>
Hier fügt man nun die ID und die Funktion zu:
<path d="M200,110 290,200 200,290 110,200 200,110" id="pfad" onload="alert(svgDocument.getElementById('pfad').getTotalLength())"/>
und erhält das Ergebnis, das man entsprechend dem Kreisbeispiel einsetzt.