CSS Eigenschaften

Mit CSS sind im SVG einige intersante Effekte möglich. Ich möchte hier ein paar aufzählen.

stroke-dasharray

Stroke ist eine Linie. Mit dem stroke-dasharray kann diese Linie unterbrochen werden. D.h. es kann eine gestrichelte Linie erzeugt werden. Den Beginn der Linie bei dem unteren Kreis habe ich mit dem roten Pfeil markiert. Die Segmente laufen um den Kreis im Uhrzeigersinn herum und enden wieder auf der rechten Seite.

<svg height="200px" width="100%">
   <circle cx="80" cy="80" id="Circle1" r="70" style="fill: lightblue; stroke: blue; stroke-width: 5px; stroke-dasharray: 20 20;"></circle>
   <circle cx="250" cy="80" id="Circle2" r="70" style="fill: lightblue; stroke: blue; stroke-width: 5px; stroke-dasharray: 30 20;"></circle>
   <path d="M 10,170 350,170" style="stroke-width: 5px; stroke: #000000; stroke-dasharray: 25 5 5 5;"></path>
</svg>

stroke-dasharray animieren

Die gestrichelte Linie kann auch animiert werden. Um die Animation ruckelfrei hin zu bekommen muss man ein bischen rechnen.

Bei einem Kreis braucht man ersteinmal den Umfang. Vielleicht erinnert sich der Ein oder Andere noch an seine Schulzeit. Der Umfang wird mit Durchmesser * π berechnet. Oder auch 2 * r * π = U.

In diesem Beispiel sind es 11 Segmente. Linie und Leerraum sind ein Segment. Den Radius haben wir mit 70 angegeben. Somit ergibt sich: (Beachtet die amerikanische Schreibweise, Komma wird zu Punkt)

2 * r * π = U

U / Segmente = ein Segment

ein Segment / 2 = ein dasharray

2 * 70 * π = 439.822971502571

439.822971502571 / 11 = 39.9839065002337

39.9839065002337 / 2 = 19.9919532501169

stroke-dasharray: 19.9919532501169 19.9919532501169;

from { stroke-dashoffset: 439.822971502571; } <- hier einfach den errechneten Umfang eintragen.
to { stroke-dashoffset: 1; }

Warum so viele Nachkommastellen?

Da ein Computer eine Rechenmaschine ist und es mit Zahlen sehr genau nimmt. Ihr dürft gerne ein wenig mit den Zahlen herumspielen. Ein paar Stellen hinter dem Komma kann man sicher abschneiden. Wie im rechten Beispiel ersichtlich: Irgendwann wird die Animation unschön. Hier habe ich mit Absicht falsche Array Werte eingesetzt.

<svg height="400px" width="100%">
   <circle class="ani1" cx="80" cy="80" r="70" style="fill: lightblue; stroke: blue; stroke-width: 5px; stroke-dasharray: 19.9919532501169 19.9919532501169;stroke-linecap:round;"></circle>
   <circle class="ani1" cx="250" cy="80" r="70" style="fill: lightgreen; stroke: blue; stroke-width: 5px; stroke-dasharray: 18 18; stroke-linecap:round;"<>/circle>
</svg>

Für die Animation brauchen wir noch eine wenig Styling. Im @keyframe setzen wir für den stroke-dashoffset einfach den Umfang ein. So wie hier läuft die Animation im Uhrzeigersinn. Es ist somit nicht nötig das Array ständig neu zu berechnen.
Der @keyframe kann nicht im Inlinestyling einfügen daher muss er entweder im head oder ein externes Stylesheet eingefügt werden.

.ani1 {
   stroke-dashoffset: 1;
   animation: myani 20s infinite linear;
}
@keyframes myani  {
   from {stroke-dashoffset: 439.822971502571; }
   to {stroke-dashoffset: 1; }
}

pattern

Das pattern Element wird verwendet um eine Grafik als Hintergrund einzufügen. Diese kann für die Füllung oder den Rahmen verwendet werden.

<svg height="200px" width="100%">
   <defs>
   <pattern height="10" id="dotPattern" patternunits="userSpaceOnUse" width="10" x="0" y="0">
      <circle class="bgDot" cx="5" cy="5" r="2" style="stroke: none; fill: #215769;"></circle>
   </pattern>
   <pattern height="20" id="dotrect" patternunits="userSpaceOnUse" width="20" x="0" y="0">
      <circle cx="5" cy="5" r="2"></circle>
      <rect height="6" width="6" x="12" y="12"></rect>
   </pattern>
   </defs>
   <circle cx="80" cy="90" r="70" style="fill: url(#dotPattern);"></circle>
   <circle cx="250" cy="90" r="60" style="fill: none; stroke:url(#dotPattern);stroke-width:20px;"></circle>
   <rect height="150" style="fill: url(#dotrect);" width="150" x="20" y="200"></rect>
</svg>

Das pattern#dotPattern hat eine Breite und Höhe von 10. In diesem pattern ist ein Kreis mit einem Radius von 2 eingebaut. Wie man sieht wird ein keines Bild das man erstellt hat als Hintergrund eingefügt. 

SVG Uhr

Wenn man die beiden Eigenschaften zusammenführt bekommt man einen schönen Effekt.

Die Vorlage habe ich aus Codepen.io, SVG Clock UI von Icebob

<svg height="340px" style="background-image: linear-gradient(black 60%, #215769 100%);" width="100%">
<defs>
   <pattern height="10" id="dotPattern" patternunits="userSpaceOnUse" width="10" x="0" y="0">
      <circle class="bgDot" cx="5" cy="5" r="2" style="stroke: none; fill: #215769;"></circle>
   </pattern>
</defs>
   <rect height="100%" style="fill: url(#dotPattern);" width="100%" x="0" y="0"></rect>
   <circle class="clockCircle hour" cx="240" cy="240" r="150" stroke-width="6" style="fill: none; stroke: #2a2a2a;"></circle>
   <circle class="clockArc hour" cx="240" cy="240" id="arcHour" r="150" stroke-linecap="round" stroke-width="6" style="fill: none; stroke: #1bbccb; stroke-dasharray: 615.228561328001176 327.249234748936796;" transform="rotate(270 240 240)"></circle>
   <circle class="clockDot hour" cx="117.1271933566512" cy="326.03646545265696" fill="#fff" r="8"></circle>
   <circle class="clockCircle minute" cx="240" cy="240" r="170" stroke-width="3" style="fill: none; stroke: #2a2a2a;"></circle>
   <circle class="clockArc minute" cx="240" cy="240" id="arcHour" r="170" stroke-linecap="round" stroke-width="3" style="fill: none; stroke: #1bbccb; stroke-dasharray: 890.117918517108084 178.023583703421617;" transform="rotate(270 240 240)"></circle>
   <circle class="clockDot minute" cx="92.77568135664546" cy="155" fill="#fff" r="5"></circle>
   <text style="font-size:5rem;fill:#fff;font-family:'Open Sans';" x="138" y="270">07:50</text>
</svg>

Für den Stunden Kreis wird ein circle für den Hintergrund und ein circle für die Stundenanzeige gezeichnet. Das stroke-dasharray kann relativ einfach berechnet werden.

Der Stundenkreis hat einen Radius von 150. Eine analoge Uhr zeigt in der Regel 12 Stunden an.

150 * 2 * π = 942,477796076937972

942,477796076937972 / 12 = 78,539816339744831

78,539816339744831 ist die Länge des Kreisabschnittes für eine Stunde. 

In diesem Beispiel werden noch die Minuten zu der Länge des Stundenkreises hinzuaddiert. In diesem Beispiel ist es 7 Uhr und 50 Minuten. Somit ergibt sich:

78,539816339744831 / 60 = 1,308996938995747

1,308996938995747 * 50 = 65,449846949787359

78,539816339744831 * 7 + 65,449846949787359 = 615,228561328001176

615,228561328001176 ist also die Länge für den Stunden Abschnitt. Jetzt noch der Abschnitt der für den leeren Teil benötigt wird.

942,477796076937972 - 615,228561328001176 = 327,249234748936796

Die Werte für den dasharray sind somit stroke-dasharray: 615.228561328001176 327.249234748936796

Um, wie weiter Oben schon beschrieben, den stroke-dasharray Oben beginnen zu lassen muss der circle noch gedret werden. Dies erreichen wir durch transform="rotate(270 240 240)". Drehe den Kreis um 270 Grad um die Achsen x=240 und y=240.

SVG Uhr

Hier habe ich mich mit dem dasharray ein wenig gespielt. Da die Uhr mit SVG realisiert wurde kann diese verlustfrei scaliert werden. Vergrößert oder verkleinert doch mal das Browser Fenster.