Rudolph the red nosed reindeer

Hampelmann CSS Animation von Rudi

In diesem Pen kannst du dir ansehen, wie du aus einer einfachen PNG-Datei einen Rudi im Hampelmann-Style erstellen kannst. Verwendet werden lediglich einfaches HTML, CSS und eine PNG-Datei. Die Körperteile von Rudi werden mit der Hintergrund Clipping-Funktion (background-position) aus dem Bild ausgeschnitten bzw. maskiert.

Bei den Animationen handelt es sich um so genannte Keyframe Animationen.

See the Pen Rudolph the red nosed reindeer by Norbert Mesch (@itsnorbat) on CodePen.


rudi-the-rednosed-reindeer-separated

Das Bild mit den einzelnen Teilen der Figur kannst du dir in voller Auflösung herunterladen, indem du auf das kleine Vorschaubild rechts klickst.

Mit JavaScript zum SVG Kreisdiagramm

svg-pie-chart-800

In diesem Beispiel zeige ich dir, wie du mit ein wenig Mathematik und JavaScript ein SVG Kreisdiagramm erstellen kannst.

Die Anzahl der Kreisstücke ist die Grundlage zur Ermittlung der Winkel für jedes einzelne Kreisstück. Bei vier Kreisstücken hat jedes Stück einen Winkel von 90° oder bei acht Kreisstücken einen Winkel von 45°. Der Winkel der Kreisstücke wird durch die Division eines Vollkreises (360°) durch die Anzahl der Teilstücke errechnet.

Formel für Teilkreise

Hinweis: Die Kreisstücke in diesem Beispiel sind alle gleich groß. Wenn du das Beispiel durchgearbeitet hast, kannst du aber auch recht einfach Kreisdiagramme mit unterschiedlich großen Stücken erstellen.

Beispiel auf Codepen

See the Pen Calculated SVG pie chart by Norbert Mesch (@itsnorbat) on CodePen.

Mit Hilfe der Sinus- und Cosinus-Funktionen kannst du die Positionen der Koordinaten auf dem Kreisumfang errechnen. Das Kreisstück wird in SVG über ein path-Element konstruiert. Beachte bitte, dass JavaScript die Bogenmaße als Werte für die WInkelfunktionen benötigt. „Mit JavaScript zum SVG Kreisdiagramm“ weiterlesen

SVG Pfad Animation und Transformation

SVG AnimationIn diesem Beispiel siehst du eine Kombination von Transformationen und Pfad Animationen mit SMIL.

Fragen zur Wiederholung von Animationssequenzen

Ich suche noch nach einer Lösung, wie sich Browser übergreifend Animationssequenzen wiederholen lassen. Leider gibt es meines Wissens kein Ereignis, das ausgelöst wird, sobald die letzte Animation ihr Ende erreicht hat.

Die Pfade habe ich mit Affinity Designer erstellt und als SVG ohne Hintergrund exportiert.

See the Pen SVG animation sequence – tribute to Keith Haring by Norbert Mesch (@itsnorbat) on CodePen.


Um die Animation zu wiederholen klicke bitte auf RERUN unten rechts im Pen.

SVG Pencil Animation mit animateMotion

In diesem Beispiel siehst du einige Animationsmöglichkeiten in SVG. Zur Animation habe ich folgende Elemente verwendet:

  • SMIL <animateMotion>-Element für den Animationspfad
  • CSS mit Keyframes für die weiße Schrift

Den Quelltext der animierten SVG-Datei kannst du dir mit einem rechten Mausklick auf das Bild (Seitenquelltext anzeigen) ansehen.

SVGPencilAnimation_1024Klicke bitte auf das Bild um die SVG-Animation in einem neuen Tab zu öffnen.

Um die Keyframe-Animation und die SMIL-Animation synchron zu starten, habe ich mit Hilfe von JavaScript der weißen Schrift beim Klick auf die Schaltfläche start writing… eine CSS-Class hinzugefügt.

<script type="text/javascript">
<![CDATA[
 function clickme(evt) {
 var element = document.getElementById("schrift");
 element.classList.add("animatedfont");
 }
]]></script>
<style>

Beispiel auf codepen.io

See the Pen SVG writing pen animation with by Norbert Mesch (@itsnorbat) on CodePen.

SVGs in WordPress

Die folgende, nicht ganz originalgetreue Zeichnung des Labyrinths von Chartres habe ich in Illustrator erstellt und als SVG (Scalable Vector Graphic ) exportiert. SVG-Dateien kannst du in einem beliebigen Text-Editor öffnen und bearbeiten. Über das viewBox-Attribut und die Attribute width und height im SVG-Element kannst du ganz einfach die Größe der Zeichnung verlustfrei skalieren.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="600px" viewBox="0 0 1418 1418">...</svg>

Sicherheitsrisiko von SVG-Dateien in WordPress

WordPress zeigt normalerweise aus Sicherheitsgründen keine SVG-Dateien an. Mehr über das Sicherheitsrisiko von SVG-Dateien, die auf XML-Strukturen basieren, kannst du in diesem informativen Videobeitrag von Mario Heidreich auf YouTube erfahren.

Die Anzeige von SVG-Dateien in deinem WordPress Blog ist prinzipiell dann ein Sicherheitsrisiko, wenn nicht klar ist, wer diese SVG-Datei erstellt bzw. in deine WordPress Mediathek hochgeladen hat. Grundsätzlich kann jede SVG-Datei schädlichen JavaScript Code enthalten und damit auch deinen Rechner infizieren.

Bevor du SVG-Dateien in deinem Blog zulässt, sollte sichergestellt sein, dass nur du bzw. dir vertraute Personen sichere SVG-Dateien ohne schädlichen Code in die Mediathek hochladen können. Außerdem sollte im Idealfall die Kommentfunktion in deiner WordPress Installation deaktiviert sein. Über einen Kommentar wäre es ein Leichtes, eine SVG-Datei über ein img-Element in deine Seite einzuschleusen, auch wenn die Datei dann nicht in deiner Mediathek liegt.

Labyrinth von Chartres

Labyrinth von Chartres als SVG-Datei

Animierte SVG-Dateien

Auch der Einsatz animierter SVG-Dateien ist jetzt möglich.

Labyrinth von Chartres animiert

 

Labyrinth von Chartres animiert (24 kByte)

HowTo

Du musst lediglich zwei Änderungen in deiner WordPress Installation vornehmen. Die erste Änderung machst du in der Datei functions.php in deinem (Child-)Theme.

  • Die erste Funktion ermöglicht es über einen Hook SVG-Dateien über den Upload-Bereich von WordPress hochzuladen.
  • Die zweite Funktion verändert die Dimension von SVG-Dateien, die im Normalfall in WordPress auf 1 x 1 Pixel gestellt ist. Diese Funktion habe ich hier gefunden:

SVG images get width and height attributes with values 1

Nach dem Speichern der Änderungen in der functions.php kannst du jetzt bereits SVG-Dateien in die Mediathek importieren und in deinen Seiten und Beiträgen verwenden.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

/**
 * Removes the width and height attributes of tags for SVG
 * 
 * Without this filter, the width and height are set to "1" since
 * WordPress core can't seem to figure out an SVG file's dimensions.
 * 
 * For SVG:s, returns an array with file url, width and height set 
 * to null, and false for 'is_intermediate'.
 * 
 * @wp-hook image_downsize
 * @param mixed $out Value to be filtered
 * @param int $id Attachment ID for image.
 * @return bool|array False if not in admin or not SVG. Array otherwise.
 */
function wg_fix_svg_size_attributes( $out, $id )
{
 $image_url = wp_get_attachment_url( $id );
 $file_ext = pathinfo( $image_url, PATHINFO_EXTENSION );

 if ( ! is_admin() || 'svg' !== $file_ext )
 {
 return false;
 }

 return array( $image_url, null, null, false );
}
add_filter( 'image_downsize', 'wg_fix_svg_size_attributes', 10, 2 );

Vielleicht ist dir aufgefallen, dass Beitragsbilder vom Typ SVG jetzt noch nicht angezeigt werden. Ein Blick auf die CSS-Klassen im Entwicklermodus deines Browsers verschaffen auch hier Abhilfe.

In der styles.css Datei fügst du einfach folgende CSS-Klasse hinzu:

img.wp-post-image[src*="svg"] {
   width: 300px;
   height: auto
}

Jetzt sollten in deinen Seiten und Beiträgen auch SVG als Beitragsbilder angezeigt werden.