In der YUI 3 Gallery: Erweiterungen für SVG, für SVG erstellt Wow! »Yahoo! User Interface Blog (YUIBlog)

In der YUI 3 Gallery: Erweiterungen für SVG, für SVG erstellt Wow!

18. Oktober 2010 um 11:18 Uhr von Vincent Hardy | In Entwicklung , YUI 3 Galerie | 2 Kommentare

Einführung

SVG ( Scalable Vector Graphics ) bietet eine deklarative Syntax für interaktive, animierte 2D-Grafik: Formen, Bildern und Text. SVG-Unterstützung ist Teil der HTML 5 -Spezifikation und SVG wird von allen gängigen Browsern, einschließlich Internet Explorer von Microsoft implementiert in der Version 9 .

Die SVG-wow.org Website Vitrinen, was mit SVG heute getan werden kann. Die Demos auf dieser Web Site wurden für die erstellte SVG Open Konferenz, auf der SVG-Wow! Sitzungen haben eine Tradition seit mehreren Jahren. Die SVG Wow! Sitzungen wurden von Dean Jackson begann, dann in Zusammenarbeit mit mir und dann weiter durch Erik Dahlstrom . Erik und ich haben auf der Sitzung für den collorated 2009 und 2010 Ausgaben von der Konferenz.

In den letzten zwei Jahren haben sich die Demos zunehmend AJAX-Frameworks verwendet, die Anwendung ihrer Funktionen, um SVG statt (oder zusätzlich zu) HTML. YUI ist das am weitesten verbreitete Rahmen auf der Website, die sowohl benutzt YUI 2 und 3 YUI .

Ich werde mit einem schnellen Überblick über SVG zu starten und dann diskutieren, welche Art von Demos, dass YUI unterstützt und die Erweiterungen, die ich auf die YUI 3 Galerie hinzugefügt haben , um es mit SVG zu arbeiten. (Diese Erweiterungen sind jetzt frei, unter den Bedingungen der Verwendung der BSD-Lizenz YUI .)

SVG Überblick

Wie HTML ist eine W3C SVG-Spezifikation. Es bietet eine Syntax zur Beschreibung Grundformen (Rechtecke, Kreise, Linien, Polygone, Ellipsen, Polylinien), beliebige Formen (beschrieben in Bezug auf Pfadsegmente, die Linien, quadratische oder kubische Bezierkurven sein kann), Text und Bildern.

Das folgende Bild ist ein Screenshot des alternate stylesheet Beispiel auf SVG-wow.org und zeigt einige SVG-Funktionen im Spiel: Reichen Rendering (Schatten-Effekte, Farbverläufe, Muster) und einfache und komplexe Formen.

Da SVG-Bildern in Bezug auf Geometrie und Rendering-Attribute definiert sind, ist es möglich, sie bei jeder Auflösung rendern. Als Ergebnis können SVG-Bildern auf jede beliebige Größe skaliert werden, unter Beibehaltung einer hohen Rendering-Qualität, zum Beispiel beim Drucken (keine scharfen Kanten mehr).

Die folgende vergrößerten Ansicht zeigt das gleiche Bild SVG zuvor gezeigt, aber gerendert mit einer höheren Auflösung unter Beibehaltung der hohen Qualität.

Genau wie HTML, SVG unterstützt Interaktivität: ist es möglich, Event-Listener auf grafische Objekte für Maus oder Tastatur-Interaktionen hinzufügen. Selbstverständlich unterstützt SVG das Document Object Model, das es einfach, die unterschiedlichen Eigenschaften von grafischen Objekten, wie zum Beispiel ihrer Geometrie oder Rendering-Stil zu manipulieren lässt.

Es gibt eine Menge zu der SVG-Spezifikation: erweiterte Rendering-Stile (Streicheln, Füllen, Muster, Farbverläufe), Filter-Effekte (Unschärfen, Schatten, Farbe Matrizen), CSS-Styling, erweiterte Text-Funktionen (z. B. Text auf einem Pfad) und deklarative Animation . Sie können sich über die Verweise am Ende von diesem Post um mehr zu erfahren über die SVG-Format Features.

SVG und HTML

Mit HTML5 , können SVG in HTML-Dokumenten ohne weiteres inlined werden. Browser sind Ausgangspunkt, um diese Funktion (z. B. unterstützen Firefox 4 ). Zur Zeit unterstützen alle gängigen Browser SVG in XHTML inlined, die die gleiche Funktionalität bietet. SVG in XHTML nur verlangt, dass Namensräume richtig deklariert sind.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> Inline-SVG </ h1>

         <SVG xmlns = "http://www.w3.org/2000/svg" version = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <-! SVG-Inhalt hier ->
         </ Svg>
     </ Body>
 </ Html>

Alle Codebeispiele auf diese Seite nutzen diese Art der Inlining SVG in XHTML.

SVG und YUI

SVG unterstützt deklarative Animation. Zum Beispiel können Sie animieren den Radius eines <circle> Element wie folgt aus:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ Kreis>

Die <animate> -Tag wird von der geliehenen SMIL -Spezifikation und, zusammen mit den anderen Elementen Animation, bietet es eine sehr mächtige Animations-Engine zum SVG.

Leider war bis vor kurzem Browser-Unterstützung für SVG Animation spärlich. Es hat in den letzten zwei Jahren verbessert, aber Microsoft hat deutlich gemacht, es wird nicht unterstützt deklarative SVG Animation im IE 9.

Infolgedessen nutzen die meisten der Demos auf dem SVG-wow.org Website Animationsskripts statt deklarative Animationen. Auf der einen Seite ist dies bedauerlich, weil deklarative Animationen effizienter als Animationsskripts sind. Auf der anderen Seite, können Animationsskripts sehr flexibel sein, und sie arbeiten über Implementierungen sehr gut.

Die Notwendigkeit einer guten Animationsskripts Lösung ist es, was trieb den Einsatz von YUI auf den SVG-wow -Demos. Allerdings sind die Demos auch andere YUI Merkmale, insbesondere der Loader und Node -Module.

Animieren von SVG mit YUI

Die Demos auf SVG-wow verwenden YUI zu schaffen elastischen Drum-Beats , Morphing-Formen oder Drehen von Text und Formen zum Beispiel. Mit YUI mit SVG benötigt ein paar Erweiterungen YUI, ich werde diese in nur einem Moment zu beschreiben.


Drehen von Text und Formen	Morphing-Formen

elastische Trommelschläge

Die folgende Abbildung zeigt, wie YUI kommt in handliches, einfach zu animieren und zu manipulieren SVG-Grafiken.

Animieren der SVG `transform` -Attribut

Alle SVG grafische Elemente haben eine transform -Attribut. Das Attribut gibt eine 2D- affine Transformation auf Elemente, die verwendet werden, um zu skalieren, neigen, drehen oder übersetzen kann.

Die SVG-wow.org YUI-Erweiterungen für SVG Animation ermöglichen die transform Attribut wie folgt aus:

 var anim = new Y.Animate ({
     Knoten: '# circleA',
     aus: {
         Transformation: {tx: 0, ty: 0, SX: 2, sy: 2}
     },
     zu: {
         Transformation: {tx: 20, ty: 20, SX: 1, sy: 1}
     },
     transformTemplate: "übersetzen (# tx, ty #) Skala (# sx, sy #)",
     Dauer: 1
 });

Siehe die Transformation Animationen Tests.

Sie werden bemerken, dass die Werte-Transformation im Sinne von "Komponenten" (wie definiert tx oder ty ), die kombiniert werden, um einen Wert über entsprechende Formulare transformTemplate auf die Animation Konfiguration Objekt gefunden.

Die Vorlage ist ein flexibler Mechanismus für den Aufbau verwandeln Werte, während separate Komponenten es einfach, die animierte Werte zu berechnen machen. Dies ist ein Beispiel, wo die YUI-Animation Modell erlaubt mehr Flexibilität (und mehr Ausdruckskraft) als SVG-SMIL Animation Element ( animateTransform ). Um die Animation oben beschrieben zu schaffen, wäre das Äquivalent SMIL Erklärung gewesen:

 <circle ...>
     <AnimateTransform attributeName = "transform" type = "übersetzen"
                       from = "0,0" zu = "20,20" dur = "1" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transform" type = "Maßstab"
                       from = "2,2" zu = "1,1" dur = "1" begin = "indefinite" />
 </ Kreis>

Man beachte, wie die oben Ausschnitt mehreren benötigt animateTransform Elemente, die synchronisiert werden müssen: der begin Attribut der ersten Animation eingestellt ist, dass scaleAnim.begin , um den Start der beiden Animationen zu synchronisieren. Ein nettes Feature des YUI-Animations-Engine ist, dass das Timing einer Animation (dh, Beginn, Ende und Dauer) gemeinsam genutzt werden können, auf mehrere Element-Eigenschaften anzuwenden.

Die YUI-Erweiterung für die Animation von SVG-Transformationen wird extensiv, wie in der verwendeten Kamera und animierte Texte Beispiele. Der ehemalige verwendet eine Erweiterung von YUI 3, während das letztere verwendet eine Erweiterung von YUI 2.

Animieren von Geometrie

Basisgeometrie

Animieren von SVG-Geometrie mit YUI ist ganz einfach. Im folgenden Beispiel werden animiert eine <rect> Elements Breite, Höhe und Eckradien:

 var anim = new Y.Animate ({
     Knoten: '# recta',
     aus: {
         Breite: 200,
         Höhe: 100,
         rx: 5,
         ry: 5
     },
     zu: {
         Breite: 300,
         Höhe: 100,
         RX: 10,
         RY: 10;
     },
     Dauer: 2,
     Lockerung: Y.Easing.elasticOut
 });

Auch die Form Animationen Tests.

Wie später erörtert auf, nahm einige Änderungen unter der Haube YUI diese Arbeit. Aber von einem Entwickler-Perspektive, funktioniert diese Animation genau die gleiche Weise wie die Animation eines anderen HTML-Attribut oder CSS-Eigenschaft.

Die `<path>` 's `d` -Attribut

Ein Geometrie-Attribut ist ein wenig spezieller: das d -Attribut für das <path> Element. Die <path> Element wird für beliebig komplexe Geometrie verwendet. Ein <path> beschreiben kann jede beliebige Form. Seine d -Attribut beschreibt seine Geometrie hinsichtlich der Pfadsegmente, die Linien, Bögen, quadratische oder kubische sein kann Bezierkurven (es gibt ein paar Befehle mehr, aber sie alle Karte in Bezierkurven).

Animieren der d -Attribut auch ein bisschen Ausweitung auf die YUI Animations-Engine benötigt, aber mit dieser Erweiterung, die d -Attribut kann wie jede andere animiert werden, wie unten dargestellt.

 var anim = new Y.Animate ({
     Knoten: "# Weg A",
     aus: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     auf: {d: "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     Dauer 1s,
     Lockerung: Y.Easing.bounceBack
 });

Siehe die Pfade Animationen Tests, die zeigt, unter anderem ein Häkchen verwandelt sich in ein Kreuz im Laufe der Zeit, wie in den folgenden Bildern dargestellt.

Die Zitate Gandhis Demo nutzt diese Technik der Animation des d -Attribut auf die Morph-Formen in Gandhis Figur.

Animieren von anderen SVG-Attribute

Natürlich sind die YUI-Animationen nicht an Geometrie Attribute beschränkt. Jede SVG-Attribut kann animiert werden. Zum Beispiel die folgende Animation animiert das Verwischradius auf einer horizontalen Weichzeichnungsfilter.

 / / SVG-Schnipsel
 <Filter ..
     <FeGaussianBlur id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript-Animation
 var anim = new Y.Animate ({
     Knoten: '# BlurFilter',
     aus: {stdDeviation: [0, 20]},
     auf: {stdDeviation: [0, 0]}
 });

Auch die Filter-Animationen Tests. Das folgende Bild zeigt, wie das Animieren einer Gaußschen Weichzeichner auf Übergang zwischen Staaten Taste verwendet werden.

Dieser Effekt wird in der verwendeten schnellen Unschärfe-Effekt -Demo, auch wenn diese Demo nicht verwendet YUI Animation, sondern deklarative SMIL Animation Elemente (auf Kosten von nur laufen in Browsern, die diese Funktion, wie oben erläutert).

Animieren von CSS-Eigenschaften

Wie HTML SVG-Elemente haben Attribute und auch CSS-Eigenschaften. SVG hat einige spezielle CSS-Eigenschaften . Diese Eigenschaften können animiert werden, manchmal zu überraschenden Effekten zu erstellen. Zum Beispiel kann die stroke-dashoffset kann Eigenschaft verwendet, um zu simulieren Zeichnen einer Form werden.

 / / SVG-Schnipsel
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var anim = new Y.Animate ({
     Knoten: "# recta",
     auf: {'Hub-dashoffset': 0},
     Dauer: 0.25
 });

Siehe die Schlaganfall-Animationen Tests.

Die Graffitis Demo nutzt diese Technik (wenn auch ohne Animation YUI) und so auch die Kamera -Demo (diesmal mit YUI-Animation).

YUI und SVG: Unter der Haube

Die SVG-wow.org Website verwendet sowohl YUI YUI 2 und 3 und verfügt über SVG-spezifischen Erweiterungen für beide. Der folgende Abschnitt dieses Artikels konzentriert sich auf die YUI 3 Verlängerungen.

Erweiterungen waren nötig, um:

YUI machen die Arbeit mit SVG-DOM-Besonderheiten
Konto für die Umsetzung Unterschiede
Hinzufügen von Unterstützung für neue Attribut-Typen wie zum Beispiel SVG verwandelt
zusätzliche Animation Timing-und Synchronisationsfunktionen

Accounting for SVG DOM Besonderheiten

Wie bereits beschrieben, können SVG-Attribute mit deklarativer Elemente wie animiert werden <animate> . Um SVG-Animation Modell unterstützen, halten SVG Attributwerte sowohl ein animiertes und einen Basis-Wert. Zum Beispiel kann die r -Attribut für eine <circle> ist Element ein SVGAnimatedLength wie folgt definiert:

 Schnittstelle SVGAnimatedLength {
   Attribut readonly SVGLength baseVal;
   Attribut readonly SVGLength animVal;
 };

Als Ergebnis, auch in Implementierungen, die keine deklarative Animation, müssen wir bis hinunter zu den baseVal bis der Wert eines Attributs zu lesen:

 var Kreis = document.getElementById ('# myCircle');
 var r-Wert = circle.getAttribute ('r') baseVal.value.;

Erweiterungen waren nötig, um die Animation zu Motor-Konto erlauben die SVG-Attribute 'ungewöhnliche Value-Modell. Zum Glück bietet YUI 3 ein Konzept der Animation Verhaltensweisen. Verhalten sind im wesentlichen Attribut-spezifische Haken, und es war ziemlich einfach zu addieren, um die Unterstützung von SVG-Attributwerten zu behandeln. Zum Beispiel, SVGAnimatedLength sind Attribute wie so gehandhabt:

 var lengthBehavior = {
     Set: function (anim, att, von, nach, verstrichene, Dauer, Spaß) {
         / / SVG spezifische Handhabung
     },

     bekommen: function (anim, attr) {
         / / SVG spezifische Handhabung
     }
 };

 / / Handle <circle> 'sr Attribut
 Y.Animate.behaviors.r = lengthBehavior;

Es gibt mehr Erweiterungen für andere SVG-Attribute Werte wie die transform Attribut, Farbe Attributwerte (wie fill , stroke -oder stop-color ) und Attribute wie stdDeviation erwähnt.

Ein paar Tweaks ähnlich waren erforderlich, zum Beispiel in der Y.Node.prototype.toString Methode, wieder zu berücksichtigen SVG- baseVal (diesmal auf der className Knoten-Eigenschaft). Ein weiteres Beispiel ist die Standard-Knoten Standards für die Node -Modul.

Bilanzierung von Browser-Unterschiede

Während die bisherigen Erweiterungen der Spezifikation, da Unterschiede zwischen HTML und SVG erforderlich sind, werden die folgenden aufgrund der Unterschiede zwischen den Browsern Umsetzung erforderlich.

SVG hat eine besondere Kategorie von Attributen genannt Präsentation Attribute . In Implementierungen unterstützt auch CSS-Styling (die alle Browser unterstützen) sind diese Attribute Präsentation wirklich nur ein weiterer Weg, um eine CSS-Eigenschaft angeben, mit einer niedrigen Spezifität . Von der SVG-Spezifikation:

Die Präsentation Attribute so wird in der CSS2-Kaskade beteiligt, als ob sie durch entsprechende CSS-Stilregeln zu Beginn des Autoren-Stylesheet mit einer Spezifität von Null gestellt ersetzt wurden. Im Allgemeinen haben bedeutet dies, dass die Präsentation führt eine niedrigere Priorität als andere CSS-Stilregeln in Autoren-Stylesheets oder "Stil" Attribute angegeben.

Leider haben einige Browser nicht korrekt implementiert die Spezifikation und window.getComputedStyle nicht immer Rechnung für alle möglichen Quellen für die Einstellung der SVG-CSS-Eigenschaften: CSS-Selektoren, style-Attribut und Präsentation Attribute.

YUI kam die Rettung durch den Node -Modul, das erweitert, um diese Browser-Unterschiede verbergen konnte. Die Y.DOM.CUSTOM_STYLES und die Y.Node.prototype.getComputedStyle könnte erweitert werden, um eine einheitliche Methode, um SVG-Style-Eigenschaften bieten gelesen werden.

Erweitern `Y.DOM`

YUI wickelt alle DOM-Zugriff über den Node -Schnittstelle. Als ein Ergebnis einige spezifische SVG DOM-Methoden, wie getBBox sind (verwendet, um die Grenzen eines SVG-Element zu berechnen), nicht zugänglich auf der verpackten Gegenstandes.

Um die Dinge einfacher zu programmieren für SVG, Erweiterungen der Standard-Y.DOM Modul (die Node wurden verwendet) hinzugefügt, um entweder aussetzen SVG-DOM-Funktionen hinzuzufügen oder Convenience-Methoden, die üblicherweise benötigt, wenn die Bearbeitung von Inhalten:

firstElement/lastElement/prevElement/nextElement/removeAllChildren (SVG nicht spezifisch)
getMatrix/setMatrix . Bietet eine einfache Möglichkeit, um Transformationen auf SVG-Elemente zu manipulieren, was bekanntlich schwer mit dem Standard-SVG-DOM
getBBox/getViewportBBox bieten einfache Möglichkeiten, um den Zugriff Begrenzungsrahmen im Element das Koordinatensystem oder im Ansichtsfenster Raum.

loadContent . Ein Hilfsprogramm, um ein DOM-Fragment einfügen beschrieben mit einem JavaScript-Objekt-Literal. Zum Beispiel:

 myNode.loadContent ({
     tag: 'g',
     füllen: 'rot',
     Schlaganfall: 'none',
     Kinder: [{
         tag: "rect",
         x: 10,
         y: 10,
         Breite: 200,
         Höhe: 300
     }, {
         tag: "Kreis",
         r: 10,
         CX: 105,
         cy: 155
     }, {
         tag: 'Bild',
         "Xlink: href ':' images / photo.png ',
         Breite: 200,
         Höhe: '300px '
     }, PrevSibling);

ist eine Abkürzung für die Herstellung verschiedener DOM-Aufrufe (wie createElementNS , setAttributeNS und appendChild ) erstellen, um eine g -Element und seine Kinder und vor dem Einsetzen prevSibling unter myNode . Das Dienstprogramm befasst sich mit Namensräume für Attribute und Elemente.

Zuschläge zu dem Animations-Engine für Timing und Synchronisation

Viele, wenn nicht die meisten Effekte mit Animation benötigen mehrere choreographierte Animation Instanzen. Typischerweise werden mehrere Animationen benötigt, um einen gewünschten Effekt zu erzielen, und der Anfang oder das Ende Animationen sind voneinander abhängig, manchmal mit einem Zeitversatz: Animationen synchronisiert werden müssen.

Zum Beispiel, wenn Sie eine Reihe von Formen, die in einer nach dem anderen verschwinden brauchen, müssen Sie einen Fade-Animation für jedes Element zu erstellen und dann Kette ihrer Startzeit mit einem leichten Versatz.

 var = gekettet Y.all ('# angekettet Kreis'),
     firstAnim, previousAnim;

 chained.each (function (Kreis) {
     var anim = new Y.Animate ({
         Knoten: Kreis,
         von: {'füllen': 'weiß'},
         auf: {'füllen': 'grau'},
         Dauer: 0.25
     });
     if (previousAnim! == undefined) {
         / / Synchrnoize den Beginn der anim auf 0,15 Sekunden nach dem Anfang
         / / Der früheren Kreis-Animation (previousAnim).
         previousAnim.onBegin (anim, 0,15);
     } Else {
         firstAnim = anim;
     }
     previousAnim = anim;
 });

 / / Start der ersten Animation 1s nach einem Klick auf einen der Kreise.
 / / Beachten Sie, dass dies eine Erweiterung des Standard-YUI run-Methode, die nicht tut, ist
 / / Nehmen ein Zeitversatz.
 chained.on ('click', function () {
     firstAnim.run (1);
 });

Siehe die Zeitverschiebungen Tests.

Verfahren onBegin macht es einfach, den Beginn von zwei Animationen zu synchronisieren, mit einem optionalen zeitlichen Versatz. Eigentlich onBegin kann auch eine Funktion aufrufen mit einem Zeitversatz. Ebenso kann die onEnd erlaubt die einfache Erweiterung es einfach, mit dem Ende einer Animation zu synchronisieren.

Standardmäßig haben YUI Animationen Ereignisse, die einen Weg zu synchronisieren sind. Die onBegin und onEnd Methoden ausdrücken die Synchronisation prägnanter (ein ähnliches Beispiel für Prägnanz ist unten dargestellt).

Darüber hinaus ist es manchmal notwendig, eine Animation mit einem Ereignis zu synchronisieren, wieder mit einem Zeitversatz. Die beginOn und endOn Erweiterungen ermöglichen es uns, dass auszudrücken. Zum Beispiel:

 anim.beginOn (Y.one ('#-Taste'), 'click', 0,5);

wird die Animation zu 0,5 s nach dem Element mit id 'Button' geklickt wurde gestartet. Dies ist ein kurzer Hand für:

 Y.one ('#-Taste "). Auf (' click ', function () {
     setTimeout (500 / * ms * /, function () {anim.run ();});
 });

Eine letzte Erweiterung, um die Animation-Klasse war die Fähigkeit, eine Animation Objekt anwenden seinen ersten Frame der Zustand, bevor es tatsächlich gestartet wurde. Dies wird oft benötigt bei der Erstellung von Animations-Effekte mit mehreren Animationen, die auf verschiedenen Zeit-Offsets zu starten.

 var anim = new Y.Animate ({
     Knoten: Y.one ('#-Taste "),
     von: {r: 30, "fill-opacity ': 0, Farbe:' Crimson '},
     auf: {r: 80, "fill-opacity ': 1, Farbe:" Gold "},
     Dauer: 0.25
 });

 / / Die folgende wird den gewünschten Zustand auf dem Zielobjekt vor dem festgelegten
 / / Eigentlich Starten der Animation.
 anim.applyStartFrame ();
 anim.run (2);

Das Bild Shuffle- Demo nutzt die Animation Offsets für den Effekt, dass der Stapel Bilder verbreitet oder setzt die Bilder wieder in einem Stapel.

Abschluss

Arbeiten mit SVG und YUI, insbesondere YUI 3, war eine sehr erfreuliche Erfahrung: ein großer Teil der YUI-Funktionalität gilt für SVG rechts aus der Box und YUI Die erweiterbare Architektur machte es möglich, rund um gelegentliche Probleme zu umgehen und die gewünschte Funktionalität hinzufügen .

Natürlich erhöht Unterstützung für SVG-Standard in YUI wäre hilfreich, insbesondere was YUI Arbeit mit Stand-alone-SVG-Dokumenten, so dass die Node -Klasse Wrap SVG-Elemente ohne Workarounds.

Es gibt auch ein paar Verbesserungen, die hilfreich sein würde. Zum Beispiel würde es helfen, wenn mehrere Elemente Animationen zielen konnte. Ebenso unterstützt mehrere Werte (wie in der <animate> würde SVG-Element zum Beispiel) hilfreich sein, um kompliziertere Effekte zu erzeugen.

Die Demos auf SVG-wow.org wurden für YUI 3.1 geschrieben und portiert auf 3,2 für den Zweck dieses Blogs. In 3.2, Übergänge wurden eingeführt, die Gebrauch machen von nativen CSS-Übergänge , wenn im Browser verfügbar. Es könnte sein, für das YUI Animations-Engine möglich, ähnlich Hebelwirkung SMIL Animation, bei der zur Verfügung (Opera, Firefox und WebKit zum Zeitpunkt des Schreibens dieses Artikels), die ebenfalls nachgeben sollte Leistungsverbesserungen.

Die SVG-Erweiterungen auf dem SVG-wow.org Website sind als YUI 3 Galerie-Modul für diejenigen, die den Spaß an der Arbeit mit YUI und SVG genießen wollen.

Referenzen

SVG Wow!
SVG-Spezifikation
SVG Tutorial
Adobes SVG-Zone (ein wenig altmodisch, aber immer noch gute Beispiele)
carto.net Beispiele
KevLinDev

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

2 Kommentare

SVG-Wow in der Tat!
Great write up, Beispiele und der Code ist für den Einsatz ... sehr cool!
Dank.
Kommentar von Dylan Oudyk - 19. Oktober 2010 #
Schön, Post und interessanter Artikel ....
_________
Helen.
Kommentar von Manchester Builders - 19. Juni 2011 #

Leider ist die Kommentarfunktion zu diesem Zeitpunkt geschlossen.

Präsentiert von WordPress auf Yahoo! Web Hosting .

Yahoo! User Interface Blog (YUIBlog)