svg im Überblick - fldit- · svg - skalierbare vektorgrafiken. ein Überblick. dr. thomas meinike...
TRANSCRIPT
SVG- Skalierbare Vektorgrafiken
Ein Uumlberblick
Dr Thomas Meinike
Hochschule Merseburg (FH)Fachbereich Informatik und Kommunikationssysteme
thomasmeinikehs-merseburgdehttpwwwetfh-merseburgdepersonmeinike
Merseburg 2005-10-25
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [2103]
Inhaltliche SchwerpunkteInhaltliche Schwerpunkte
Grundlagen
- Allgemeines uumlber das Thema SVG- Aufbau von SVG-Dokumenten- Grundformen und weitere Zeichentechniken- Gradienten Filter Transformationen Animationen
Fortgeschrittene Techniken
- Aktionsprogrammierung mit JavaScript- SVG-Generierung mittels XSLT und PHP
Nicht oder oder nur ansatzweise behandelt werden
- Mobile SVG-Standards ( tekom-Tagung im Nov 2005)- SVG 12 ( Material unter svglbcdatenverdrahtende)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [3103]
Was ist SVGWas ist SVG SVG wurde urspruumlnglich von Adobe als Gegenentwurf zu anderen
vektorbasierten Web-Technologien wie Flash oder VML entwickelt undspaumlter als W3C-Empfehlung verabschiedet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [4103]
Was ist SVGWas ist SVG XML-Vokabular zur Beschreibung von 2D-Vektorgrafiken
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [5103]
Was ist SVGWas ist SVG SVG 10 ist eine 2001 verabschiedete W3C-Spezifikation zur
Beschreibung von 2D-Vektorgrafiken in XML-Syntax
Enthalten sind geometrische Primitive wie Rechteck Kreis Ellipse LiniePolylinie Polygon sowie weitere Elemente zur Darstellung von PfadenText Hyperlinks usw
SVG-Inhalte lassen sich mit CSS formatieren und durch den Einsatzvon JavaScript-Routinen dynamisch veraumlndern sowie mit Sprachen wiePHP Perl usw leicht auf dem Webserver erzeugen
Techniken wie Animationen Gradienten Filter und Transformationenermoumlglichen auch komplexe Darstellungen
Vorteile
offen plattformunabhaumlngig durchsuchbar Einsatz fuumlr Web und Print
Einsatzgebiete
Kartografie technische Illustration Datenpraumlsentation XML-Workflows
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [6103]
W3CW3C--SVGSVG--RoadmapRoadmap Zeitraster
092001 SVG 10
012003 SVG 11 (Modularisierung in mobile Profile Tiny bzw Basic)
072006 SVG 12 (Erweiterung des Sprachumfangs)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [7103]
W3CW3C--SVGSVG--SpezifikationenSpezifikationen
httpwwww3org
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [2103]
Inhaltliche SchwerpunkteInhaltliche Schwerpunkte
Grundlagen
- Allgemeines uumlber das Thema SVG- Aufbau von SVG-Dokumenten- Grundformen und weitere Zeichentechniken- Gradienten Filter Transformationen Animationen
Fortgeschrittene Techniken
- Aktionsprogrammierung mit JavaScript- SVG-Generierung mittels XSLT und PHP
Nicht oder oder nur ansatzweise behandelt werden
- Mobile SVG-Standards ( tekom-Tagung im Nov 2005)- SVG 12 ( Material unter svglbcdatenverdrahtende)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [3103]
Was ist SVGWas ist SVG SVG wurde urspruumlnglich von Adobe als Gegenentwurf zu anderen
vektorbasierten Web-Technologien wie Flash oder VML entwickelt undspaumlter als W3C-Empfehlung verabschiedet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [4103]
Was ist SVGWas ist SVG XML-Vokabular zur Beschreibung von 2D-Vektorgrafiken
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [5103]
Was ist SVGWas ist SVG SVG 10 ist eine 2001 verabschiedete W3C-Spezifikation zur
Beschreibung von 2D-Vektorgrafiken in XML-Syntax
Enthalten sind geometrische Primitive wie Rechteck Kreis Ellipse LiniePolylinie Polygon sowie weitere Elemente zur Darstellung von PfadenText Hyperlinks usw
SVG-Inhalte lassen sich mit CSS formatieren und durch den Einsatzvon JavaScript-Routinen dynamisch veraumlndern sowie mit Sprachen wiePHP Perl usw leicht auf dem Webserver erzeugen
Techniken wie Animationen Gradienten Filter und Transformationenermoumlglichen auch komplexe Darstellungen
Vorteile
offen plattformunabhaumlngig durchsuchbar Einsatz fuumlr Web und Print
Einsatzgebiete
Kartografie technische Illustration Datenpraumlsentation XML-Workflows
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [6103]
W3CW3C--SVGSVG--RoadmapRoadmap Zeitraster
092001 SVG 10
012003 SVG 11 (Modularisierung in mobile Profile Tiny bzw Basic)
072006 SVG 12 (Erweiterung des Sprachumfangs)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [7103]
W3CW3C--SVGSVG--SpezifikationenSpezifikationen
httpwwww3org
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [3103]
Was ist SVGWas ist SVG SVG wurde urspruumlnglich von Adobe als Gegenentwurf zu anderen
vektorbasierten Web-Technologien wie Flash oder VML entwickelt undspaumlter als W3C-Empfehlung verabschiedet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [4103]
Was ist SVGWas ist SVG XML-Vokabular zur Beschreibung von 2D-Vektorgrafiken
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [5103]
Was ist SVGWas ist SVG SVG 10 ist eine 2001 verabschiedete W3C-Spezifikation zur
Beschreibung von 2D-Vektorgrafiken in XML-Syntax
Enthalten sind geometrische Primitive wie Rechteck Kreis Ellipse LiniePolylinie Polygon sowie weitere Elemente zur Darstellung von PfadenText Hyperlinks usw
SVG-Inhalte lassen sich mit CSS formatieren und durch den Einsatzvon JavaScript-Routinen dynamisch veraumlndern sowie mit Sprachen wiePHP Perl usw leicht auf dem Webserver erzeugen
Techniken wie Animationen Gradienten Filter und Transformationenermoumlglichen auch komplexe Darstellungen
Vorteile
offen plattformunabhaumlngig durchsuchbar Einsatz fuumlr Web und Print
Einsatzgebiete
Kartografie technische Illustration Datenpraumlsentation XML-Workflows
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [6103]
W3CW3C--SVGSVG--RoadmapRoadmap Zeitraster
092001 SVG 10
012003 SVG 11 (Modularisierung in mobile Profile Tiny bzw Basic)
072006 SVG 12 (Erweiterung des Sprachumfangs)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [7103]
W3CW3C--SVGSVG--SpezifikationenSpezifikationen
httpwwww3org
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [4103]
Was ist SVGWas ist SVG XML-Vokabular zur Beschreibung von 2D-Vektorgrafiken
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [5103]
Was ist SVGWas ist SVG SVG 10 ist eine 2001 verabschiedete W3C-Spezifikation zur
Beschreibung von 2D-Vektorgrafiken in XML-Syntax
Enthalten sind geometrische Primitive wie Rechteck Kreis Ellipse LiniePolylinie Polygon sowie weitere Elemente zur Darstellung von PfadenText Hyperlinks usw
SVG-Inhalte lassen sich mit CSS formatieren und durch den Einsatzvon JavaScript-Routinen dynamisch veraumlndern sowie mit Sprachen wiePHP Perl usw leicht auf dem Webserver erzeugen
Techniken wie Animationen Gradienten Filter und Transformationenermoumlglichen auch komplexe Darstellungen
Vorteile
offen plattformunabhaumlngig durchsuchbar Einsatz fuumlr Web und Print
Einsatzgebiete
Kartografie technische Illustration Datenpraumlsentation XML-Workflows
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [6103]
W3CW3C--SVGSVG--RoadmapRoadmap Zeitraster
092001 SVG 10
012003 SVG 11 (Modularisierung in mobile Profile Tiny bzw Basic)
072006 SVG 12 (Erweiterung des Sprachumfangs)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [7103]
W3CW3C--SVGSVG--SpezifikationenSpezifikationen
httpwwww3org
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [5103]
Was ist SVGWas ist SVG SVG 10 ist eine 2001 verabschiedete W3C-Spezifikation zur
Beschreibung von 2D-Vektorgrafiken in XML-Syntax
Enthalten sind geometrische Primitive wie Rechteck Kreis Ellipse LiniePolylinie Polygon sowie weitere Elemente zur Darstellung von PfadenText Hyperlinks usw
SVG-Inhalte lassen sich mit CSS formatieren und durch den Einsatzvon JavaScript-Routinen dynamisch veraumlndern sowie mit Sprachen wiePHP Perl usw leicht auf dem Webserver erzeugen
Techniken wie Animationen Gradienten Filter und Transformationenermoumlglichen auch komplexe Darstellungen
Vorteile
offen plattformunabhaumlngig durchsuchbar Einsatz fuumlr Web und Print
Einsatzgebiete
Kartografie technische Illustration Datenpraumlsentation XML-Workflows
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [6103]
W3CW3C--SVGSVG--RoadmapRoadmap Zeitraster
092001 SVG 10
012003 SVG 11 (Modularisierung in mobile Profile Tiny bzw Basic)
072006 SVG 12 (Erweiterung des Sprachumfangs)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [7103]
W3CW3C--SVGSVG--SpezifikationenSpezifikationen
httpwwww3org
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [6103]
W3CW3C--SVGSVG--RoadmapRoadmap Zeitraster
092001 SVG 10
012003 SVG 11 (Modularisierung in mobile Profile Tiny bzw Basic)
072006 SVG 12 (Erweiterung des Sprachumfangs)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [7103]
W3CW3C--SVGSVG--SpezifikationenSpezifikationen
httpwwww3org
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [7103]
W3CW3C--SVGSVG--SpezifikationenSpezifikationen
httpwwww3org
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [8103]
Beteiligte Autoren FirmenBeteiligte Autoren Firmen
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [9103]
Software zur SVG-Erstellung Adobe Illustrator (adobecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [10103]
Software zur SVG-Erstellung Jasc WebDraw (jasccom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [11103]
Software zur SVG-Erstellung Inkscape (inkscapeorg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [12103]
Software zur SVG-Erstellung Beatware Mobile Designer (beatwarecom)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [13103]
Software zur SVG-Darstellung
Adobe SVG Viewer (ASV 30x 60 preview 1) alsBrowser Plug-in fuumlr IE NetscapeMozilla Opera
Corel SVG Viewer (CSV 20x)
Browser mit nativer SVG-Unterstuumltzung- spezielle MozillaFirefox-Builds (ab FF 15 SVG nativ)- Opera ab Version 8 (Beta 3) stellt SVG-Tiny 11 dar
Batik Squiggle aus dem Batik SVG Toolkit (Java-basiert)
Einbindung uumlber Java-Applets wie z B TinyLineSVG Player for Web
Handys mit integriertem Viewer (K700i S65 )
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [14103]
Software zur SVG-Darstellung
ASV 30x - Kontextmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [15103]
Software zur SVG-Darstellung
Opera 8 | TinyLine Applet | Handy
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [16103]
Software zur SVG-Darstellung
Mozilla Firefox ab Version 15 (aktuell Beta 2)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [17103]
Syntaxregeln zur Erstellung von XMLSyntaxregeln zur Erstellung von XML--DokumentenDokumenten Kriterien fuumlr die Wohlgeformtheit (well-formedness)
Es gibt genau ein Wurzelelement welches alle Inhalte umschlieszligt
Alle Elemente sind durch Anfangs- und Endtags korrekt ausgezeichnet(leere Elemente in der Form ltel gtltelgt oder ltel gt)
Alle Elemente sind korrekt ineinander verschachtelt(ltagtltbgtltbgtltagt und nicht ltagtltbgtltagtltbgt)
Attributwerte stehen in Anfuumlhrungszeichen (paarweise ldquoldquo oder lsquolsquo)
Regeln fuumlr die Schreibweise werden eingehalten
Reservierte Zeichen sind je nach Kontext ggf maskiertlt = amplt | gt = ampgt | amp = ampamp | ldquo = ampquot | lsquo = ampapos
Ungeparste Inhalte in CDATA-Abschnitten moumlglich lt[CDATA[]]gt
Kommentare (einzeiligmehrzeilig) lt-- --gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [18103]
SVG im UumlberblickSVG im Uumlberblick
SVG-XML-Grundgeruumlst
ltxml version=10 encoding=ISO-8859-1 standalone=nogt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svg
xmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtoptionaler Titellttitlegtltdescgtoptionale BeschreibungltdescgtltdefsgtStylesheets Skriptcode Referenzenltdefsgt
lt-- weitere SVG-Inhalte --gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [19103]
SVG im UumlberblickSVG im Uumlberblick SVG-Koordinatensystem
Einheiten (fuumlr Koordinaten und Laumlngen analog zu CSS) em ex px pc pt mm cm in [Zahlenwert ohne Einheit = px]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [20103]
SVG im UumlberblickSVG im Uumlberblick SVG-Grafikaufbau
Grafikinhalte werden in der Reihenfolge ihrer Definition imXML-Code auf der Zeichenflaumlche angeordnet uumlberlagert
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [21103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Rechteck
ltrect x= y= width= height=rx= ry=gt
x = x-Koordinatey = y-Koordinatewidth = Breiteheight = Houmlherx ry = Radien fuumlr abgerundete Ecken (optional)
ltrect x=30 y=40width=80 height=60gt
ltrect x=30 y=40 width=80height=60 rx=10 ry=10gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [22103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Kreis
ltcircle cx= cy= r=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesr = Radius
ltcircle cx=80 cy=70 r=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [23103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Ellipse
ltellipse cx= cy= rx= ry=gt
cx = x-Koordinate des Mittelpunktescy = y-Koordinate des Mittelpunktesrx = Radius der Halbachse in x-Richtungry = Radius der Halbachse in y-Richtung
ltellipse cx=80 cy=70rx=50 ry=30gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [24103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Linie
ltline x1= y1= x2= y2=gt
x1 = x-Koordinate des ersten Punktesy1 = y-Koordinate des ersten Punktesx2 = x-Koordinate des zweiten Punktesy2 = y-Koordinate des zweiten Punktes
ltline x1=20 y1=30x2=120 y2=110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [25103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Mehrfachlinie
ltpolyline points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichen
ltpolyline points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [26103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Grundformen Polygon (n-Eck n ge 3)
ltpolygon points=x1y1 x2y2 xnyngt
points = Liste der einzelnen durch Linien zuverbindenden Punkte (xy)Trennung durch Kommata Leerzeichenletzter Punkt wird mit erstem Punktverbunden
ltpolygon points=3040 20604080 120100 80110gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [27103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=gt
d = Pfad-Daten mit diesen Parametern
[Mm]xy moveto[Ll]xy lineto[Hh]x horizontal lineto[Vv]y vertical lineto[Cc]x1y1 x2y2 xy cubic Beacutezier curveto[Ss]x2y2 xy smooth cubic curveto[Qq]x1y1 xy quadratic Beacutezier curveto[Tt]xy smooth quadratic curveto[Aa]rxry x-axis-rotation large-arcsweep xy
elliptical arc[Zz] closepath[]groszlig absolute klein relative Koordinaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [28103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M4040 L5070 H80 V100 L100120gt
ltpath d=M4040 l1030 h30 v30 l2020gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [29103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 Q20100 100120gt
quadratische Beacutezier-Kurvemit 1 Stuumltzpunkt (Anfasser) = P1
Pierre Beacutezier (1910 bis 1999)franzoumlsischer Mathematikerbeschrieb Anfang der 1960erdie Beacutezierkurven-Polynome
C(t) = (1ndasht)2 P0 + 2t(1ndasht) P1 + t2 P2 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [30103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6040 C20100 12030 100120gt
kubische Beacutezier-Kurvemit 2 Stuumltzpunkten (Anfassern) = P1 und P2
C(t) = (1ndasht)3 P0 + 3t(1ndasht)2 P1 + 3t2(1ndasht) P2 + t3 P3 t isin [01]
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [31103]
SVG im UumlberblickSVG im Uumlberblick
Grafische Spezialformen Pfade
ltpath d=M6090 L6050 A4040 0 01 10090Zgt
large-arc(Groumlszlige)
(0) 0180deg(1) gt180deg
sweep(Richtung)
(0) negativ(1) positiv
x-Rotation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [32103]
SVG im UumlberblickSVG im Uumlberblick
Grafikobjekte Inhalte gruppieren
ltg fill=none stroke=blue stroke-width=1gt
ltcircle cx=80 cy=70 r=30gtltrect x=30 y=30 width=100 height=80gt
ltggt
Kreis und Rechteck erhaltenals Mitglieder der Gruppe(Kindelemente des g-Elements) dieselben Eigenschaften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [33103]
SVG im UumlberblickSVG im Uumlberblick
Textinhalte (einzelne Texte oder mehrere Zeilen)
lttext x= y=gtTextinhaltlttextgt
x = x-Koordinate der Grundliniey = y-Koordinate der Grundlinie
lttext x= y=gtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangtlttspan x= dy=gtlttspangt
lttextgt
dy = vertikaler Zeilenabstand(z B Angabe in em)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [34103]
SVG im UumlberblickSVG im Uumlberblick
Hyperlinks (aumlhnlich zu Links in HTML)
lta xlinkhref=gtlttext x= y=gtLinktextlttextgt
ltagt
lta xlinkhref=gtlt-- Grafikobjektz B Kreis --gt
ltcircle gtltagt
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [35103]
SVG im UumlberblickSVG im Uumlberblick
externe Bilder (aumlhnlich zu Bildern in HTML)
ltimage xlinkhref=x= y= width= height=gt
BildformatebullGIF
bullJPEG
bullPNG
bullSVG
Hinweis XLink-Namensraum im Wurzelelement angeben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [36103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit Praumlsentationsattributen
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= fill=redstroke=blue stroke-width=2gt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= fill=090font-family=Arial sans-seriffont-size=14gtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [37103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Attribut)
ndash roter Kreis mit blauem Rand der Staumlrke 2 Pixel
ltcircle cx= cy= r= style=fill redstroke blue stroke-width 2pxgt
ndash gruumlner Text 14 Pixel hoch in der Schriftart Arial (bzw Alternativen)
lttext x= y= style=fill 090font-family Arial sans-seriffont-size 14pxgtText in SVGlttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [38103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (style-Element)
ltdefsgtltstyle type=textcssgtlt[CDATA[ CSS-Definitionen
circlefill redstroke bluestroke-width 2px
]]gtltstylegt
ltdefsgt
bullSelektoren aus CSS 2
bullEigenschaften z T aus CSS 2uumlbernommen und SVG-eigene
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [39103]
SVG im UumlberblickSVG im Uumlberblick
Formatierung mit CSS-Eigenschaften (externes Stylesheet)
ltxml version=10 gtltxml-stylesheet href=dateicss type=textcssgtltDOCTYPE svg gt
ltsvg gt
ltsvggt
circlefill redstroke bluestroke-width 2px
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [40103]
SVG im UumlberblickSVG im Uumlberblick
Wichtige Attribute bzw CSS-Eigenschaften
ndash Fuumlllfarbe fill (keine Fuumlllung mit Wert none)ndash Rahmenfarbe strokendash Rahmenstaumlrke stroke-width- RahmenLinien gestrichelt stroke-dasharray
- Deckkraft opacity (01 1=volle Deckkraft)auch fill-opacity und stroke-opacity
- Schriftformatierung font-size font-family font-style- Textauszeichnungen text-decoration text-transform
- Anzeige von Objekten display visibility
- weitere aus CSS bekannte sowie fuumlr SVG definierteEigenschaften und Werte
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [41103]
SVG im UumlberblickSVG im Uumlberblick
Farbwerte (AttributeEigenschaften fill stroke usw)
Beispiel Farbe rot
ndash hexadezimal 6-stellig (RRGGBB) FF0000
ndash hexadezimal 3-stellig (RGB) F00
ndash dezimale RGB-Schreibweise rgb(25500)
ndash prozentuale RGB-Schreibweise rgb(10000)
ndash Farbwort red
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [42103]
SVG im UumlberblickSVG im Uumlberblick SVG-Einbindung in HTML
ndash ndash W3C-konform uumlber die Element object oder iframe
ltobject data=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltobjectgt
ltiframe src=dateisvg width= height=frameborder=0gtltndash Alternativinhalt --gt
ltiframegt
ndash ndash ggf fuumlr Netscape 4x mittels embed oder objectembed-Kombination
ltembed src=dateisvg width= height=type=imagesvg+xmlgtltndash Alternativinhalt --gt
ltembedgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [43103]
SVG im UumlberblickSVG im Uumlberblick
Spezielle SVG-Elemente symbol (Symbolobjekte)
ltdefsgtltsymbol id=einsymbolgtltcircle cx=11 cy=10 r=5 fill=090gtltrect x=0 y=16 width=10 height=10fill=00Cgt
ltrect x=11 y=16 width=10 height=10fill=F00gt
ltsymbolgtltdefsgtltuse xlinkhref=einsymbol x=40 y=30gtltuse xlinkhref=einsymbol x=70 y=60gtltuse xlinkhref=einsymbol x=100 y=90gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [44103]
SVG im UumlberblickSVG im Uumlberblick
Weitere spezielle SVG-Elemente
pattern marker
clipPath mask
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [45103]
SVG im UumlberblickSVG im Uumlberblick
Farbverlaumlufe linearGradient radialGradient
ltdefsgtltlinearGradient id=eineID gtltstop offset=0 stop-color=gtltstop offset=100 stop-color=gt
ltlinearGradientgtltdefsgt
Attribute zur Steuerung von Verlaumlufen
- x1 y1 x2 y2 (jeweils 01 bzw 0100)- spreadMethod=pad | repeat | reflect- stop-Element kann noch stop-opacity erhalten
Einbindung als Fuumlllung fill=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [46103]
SVG im UumlberblickSVG im Uumlberblick
Linerare Farbverlaumlufe linearGradient
1
ltlinearGradient id=lin1gtltstop offset=0 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltlinearGradientgt
2
ltlinearGradient id=vertx1=0 y1=0 x2=0 y2=100gtltstop offset=0 stop-color=FFFgtltstop offset=50 stop-color=00Cgtltstop offset=100 stop-color=FFFgt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [47103]
SVG im UumlberblickSVG im Uumlberblick
Radiale Farbverlaumlufe radialGradient
2ltradialGradient id=rad2 fx=30 fy=70gt
ltstop offset=0 stop-color=FFFgtltstop offset=60 stop-color=FF0gtltstop offset=100 stop-color=F00gt
ltradialGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [48103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Allgemeines
ltdefsgtltfilter id=eineID gtltfeFilterElement gtltfeFilterElement gt
ltfiltergtltdefsgt
Einbindung mit filter-Attributfilter=url(eineID)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [49103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Uumlbersicht (16 Grundfilter und 8 weitere als Kindelemente)
ltfeBlendgt - zwei Objekte uumlberblenden
ltfeColorMatrixgt - Farbaumlnderung durch Matrixberechnung
ltfeComponentTransfergt - Farbkomponenten neu berechnen
ltfeCompositegt - zwei Objekte zusammenfuumlgen
ltfeConvolveMatrixgt - Unschaumlrfe- und Praumlgefilter
ltfeDiffuseLightinggt - indirekter Beleuchtungseffekt
ltfeDisplacementMapgt - Pixelverschiebung
ltfeFloodgt - Objekt mit einer Farbe und Transparenz fuumlllen
ltfeGaussianBlurgt - Weichzeichner (Schatten bzw Unschaumlrfe)
ltfeImagegt - Bild zuweisenladen
ltfeMergegt - beliebig viele Objekte zusammenfuumlgen
ltfeMorphologygt - Verdicken und Verduumlnnen eines Objektes
ltfeOffsetgt - Objekt verschieben
ltfeSpecularLightinggt - direkter Beleuchtungseffekt
ltfeTilegt - Bild innerhalb eines Objektes kacheln
ltfeTurbulencegt - Texturerzeugung (Perlin-Noise-Funktion)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [50103]
SVG im UumlberblickSVG im Uumlberblick
Filter-Elemente Beispiel
ltdefsgtltfilter id=einfiltergtltfeGaussianBlur in=SourceAlpha stdDeviation=4result=out1gt
ltfeSpecularLighting in=out1 specularExponent=10surfaceScale=3 result=out2gtltfePointLight x=150 y=300 z=300gt
ltfeSpecularLightinggtltfeComposite in=SourceGraphic in2=out2operator=arithmetic k1=0 k2=1 k3=1 k4=0gt
ltfiltergtltdefsgtltcircle cx=75 cy=75 r=40 fill=090 filter=url(einfilter)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [51103]
SVG im UumlberblickSVG im Uumlberblick Filter-Elemente SVG-Filter in Adobe Illustrator CS
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [52103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen werden Elementen oder Gruppen von Elementenmittels transform-Attribut zugewiesen
Transformiert wird das Koordinatensystem und nicht das jeweiligeObjekt
Transformationsartenrotate(Winkel in Grad) oder rotate(Winkel in Grad [Drehpunkt_xDrehpunkt_y])= Drehen
scale(Faktor fuumlr x- und y-Richtung) bzw scale(Faktor_x [Faktor_y])= Skalieren (Vergroumlszligern gt1 bzw Verkleinern lt1)
skewX(Winkel in Grad)skewY(Winkel in Grad)= Neigen in Richtung der x- bzw y-Achse
translate(Distanz_xDistanz_y)= Verschieben in x- bzw y-Richtung
Hinweisplusmn Winkel in Grad fuumlr im Uhrzeigersinn (+) bzw gegen den Uhrzeigersinn (-)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [53103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Allgemeines
Transformationen koumlnnen kombiniert (nacheinander ausgefuumlhrt) werdentransform=ldquooperation2() operation1()ldquo [Abarbeitung von rechts nach links]
Transformationen lassen sich in Matrix-Schreibweisen formulierentransform=ldquomatrix(abcdef)ldquo
= 3x3-Matrix mit sechs relevanten Parametern
|a c e||b d f||0 0 1|
mit folgenden Zuordnungsvorschriften
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [54103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Rotation um den Ursprung bzw um einen anderen Drehpunkt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [55103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Skalierung (Vergroumlszligerung bzw Verkleinerung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [56103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Neigung (der Achsen in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [57103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Verschiebung (in x- bzw y-Richtung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [58103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Kombination von Transformationen
Rotieren --gt Skalieren --gt Verschieben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [59103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Transformation einer Gruppe von Objekten
ltg transform=gtltrect gtlttext gt
ltggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [60103]
SVG im UumlberblickSVG im Uumlberblick
Koordinatensystem-Transformationen Beispiele
Spiegeln mit scale() durch Setzen von -1 fuumlr x-y-Skalierung
HinweisSpiegelung erfolgt an den Achsen deshalb zusaumltzliche Verschiebungmit translate() sinnvoll
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [61103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (aus der SMIL-SpezifikationSMIL = Synchronized Multimedia Integration Language)
animate Animation skalarer XML-Attribute CSS-Eigenschaften
animateColor speziell zur Animation von Farbwerten (Farbuumlbergaumlnge)vorgesehen (akzeptiert alle animate-Attribute auchaccumulate=sum)
animateMotion Bewegung an einem Pfad entlang
set Animation von nichtnumerischen Werten (z B visibilityvisible | hidden oder display block | none oder fuumlr Hover-Effekte mit Farbwerten Opazitaumlt usw)bei dur=indefinite oder fill=freeze bleibt der Effekterhalten sonst wird dieser wieder aufgehoben
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [62103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Animationselemente (SVG-Erweiterungen von SMIL)
animateTransform Modifikation von Transformationen (DrehungenVerschiebungen NeigungenVerzerrungen Skalierungen)Attribut type (analog zum transform-Attribut fuumlrSVG-Elemente)
animateMotion Kindelement mpath referenziert ein vorhandenes SVG-Pfadelement als Definitionsbereich der AnimationAttribut path (Pfadsyntax gemaumlszlig dem d-Attribut des SVG-Elements path)SMIL erlaubt nur eine Untermenge der SVG-Pfadsyntax
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [63103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Zuweisung von Animationen
- als Kindelement eines zu animierenden SVG-Elements
ltelementgtltanimationselement gt
ltelementgt
- oder per Referenz uumlber eine dem zu animierenden Element zugewiesene ID
ltelement id=abc gtlt-- ggf weitere Inhalte --gtltanimationselement xlinkhref=abc gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [64103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Allgemeines
Festlegung der zu animierenden XML-Attribute oder CSS-Eigenschaften
attributeName= erhaumllt Name des Attributes oder der Eigenschaft
attributeType=CSS | XML | auto
CSS = animierbare CSS-EigenschaftXML = animierbares XML-Attributauto = Standardwert sucht in der Reihenfolge CSS XML nach Eigenschaft
oder Attribut mit dem bei attributeName angegebenen Wert
- zu animierbaren Attributen Eigenschaften siehe Abschnitt 1925 derSVG 11-Spezifikation
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [65103]
SVG im UumlberblickSVG im Uumlberblick Animationen Allgemeines
Attribute zur Steuerungbegin Startzeitpunkt(e)
end Endzeitpunkt
dur Zeitdauer eines Animationsdurchlaufes
min minimaler Zeitwert fuumlr einen Durchlauf
max maximaler Zeitwert fuumlr einen Durchlauf
restart Vorgaben fuumlr den Neustart einer Animation
repeatCount Anzahl von Wiederholungen
repeatDur Gesamtzeit fuumlr Wiederholungen der Animation
from Startwert eines Attributes einer Eigenschaft
to Endwert eines Attributeseiner Eigenschaft
by relative Aumlnderung eines Attributes
fill freeze remove
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [66103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiele
Die folgenden Beispiele sind Bestandteil des Artikels bdquoMobile Vektorenldquoerschienen in Internet Professionell 62003 online verfuumlgbar unterhttpwwwvnunetdepraxisprofessional_computingarticle20030504508aspx
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [67103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 01
Der cx-Wert des Mittelpunktes eines Kreises wird 2 Sekunden nach dem Ladeninnerhalb von 5 Sekunden von 50 auf 300 erhoumlht Es werden Moumlglichkeiten derReferenzierung von Animationselementen gezeigt Die Animationen werden jeweilseinmal ausgefuumlhrt Danach gehen die Objekte in den Ausgangszustand zuruumlck
ltcircle id=k1 class=rot cx=50 cy=40 r=20gt
ltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300 xlinkhref=k1gt
ltcircle class=gruen cx=50 cy=140 r=20gtltanimate attributeName=cx attributeType=XML begin=2sdur=5s from=50 to=300gt
ltcirclegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [68103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 23
Simulation einer Ampel Der gruumlne Kreis wird nach 6 Sekunden durch den gelben Kreis abgeloumlst Nach weiteren 3 Sekunden erscheint 6 Sekunden lang der rote Kreis 3 Sekunden spaumlter erscheint wieder gelb Nach gelbend schaltetdie Ampel fuumlr 6 Sekunden auf gruumln und das Spiel beginnt erneut
ltcircle id=k1 class=ampel cx=100 cy=30 r=10gtltcircle id=k2 class=ampel cx=100 cy=60 r=10gtltcircle id=k3 class=ampel cx=100 cy=90 r=10gt
ltanimate attributeName=fill attributeType=CSSbegin=0sgelbend xlinkhref=k3dur=001s from=none to=0F0 fill=freezegt
lt-- weitere animate-Elemente --gtltanimate attributeName=fill attributeType=CSSbegin=prevend+3s xlinkhref=k2 id=gelbdur=001s from=FF0 to=none fill=freezegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [69103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 29
Animation eines Pfades (der rote Mund des Smileys) Das Pfad-Attribut d wirdvom Ausgangswert (Mund nach unten) zum Endwert (Mund nach oben) animiert
lt-- Pfad fuer den roten Mund mit Animation --gtltpath d=M 85130 A 55 0 11 115130style=fill FF0 stroke F00 stroke-width 2pxgtltanimate attributeName=d attributeType=XMLbegin=0s dur=10s fill=freezefrom=M 85130 A 55 0 11 115130to=M 85110 A 55 0 10 115110gt
ltpathgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [70103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 30
Es werden drei Rechtecke durch Aumlnderung ihrer Transformationsparameter animiert Das Element animateTransform erhaumllt uumlber das Attribut type die Art der Transformation zugewiesen (moumlgliche Werte rotate scale skewX skewY translate)
lt-- Code fuer das gruene Rechteck --gtltrect class=gruen x=170 y=280 width=100height=80gtltanimateTransform attributeName=transformattributeType=XML type=scalefrom=1 to=02 begin=2s dur=10sfill=freezegt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [71103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 321
Es werden die Parameter von linearen Gradienten animiert (x1y1x2y2)
ltlinearGradient id=animlingra1 x1=0 y1=0 x2=1 y2=1spreadMethod=reflectgt
ltstop offset=0 style=stop-color 000gtltstop offset=50 style=stop-color 00Fgtltstop offset=100 style=stop-color FFFgt
ltanimate attributeName=x1 attributeType=XML begin=0sdur=5s from=0 to=1 repeatCount=indefinitegt
lt-- weitere animate-Elemente fuer x2 und y1 --gtltanimate attributeName=y2 attributeType=XML begin=0sdur=5s from=1 to=0 repeatCount=indefinitegt
ltlinearGradientgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [72103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 331
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- blaues Rechteck mit Animation --gtltrect x=100 y=147 width=0 height=15 style=fill00C filter url(flt)gtltanimate attributeName=width attributeType=XMLbegin=0s dur=10s fill=freezefrom=0 to=278gt
ltrectgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [73103]
SVG im UumlberblickSVG im Uumlberblick
Animationen Beispiel 332
Die Grafik zeigt ein Balkendiagramm wobei die Balken uumlber eine Zeit von 10 Sekunden ihre maximale Breite erreichen Nach insgesamt 12 Sekunden werden die Beschreibungstexte rechts neben den Balken eingeblendet Animiert werden die XML-Eigenschaft width sowie die CSS-Eigenschaftvisibility
lt-- Text nach dem blauen Rechteck mit Animation --gtlttext x=388 y=158 style=font-size 12px text-anchorright visibility hiddengt[3478]ltanimate attributeName=visibility attributeType=CSSbegin=10s dur=2s fill=freezefrom=hidden to=visible calcMode=discretegt
lttextgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [74103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
XSLT dient zur Transformation von XML-Dokumenten (bzw Inhalten)wobei die Ausgaben als HTML XML oder Text erfolgen koumlnnen
SVG ist ein XML-basiertes Format sodass XSL-Transformationen zurProduktion von SVG-Dokumenten grundsaumltzlich moumlglich und in der Praxisauch sinnvoll sind
Zur praktischen Durchfuumlhrung werden neben den Ausgangs-XML-Dokumenten geeignete XSL-Stylesheets sowie XSLT-Prozessoren benoumltigt
XSLT wird im Bereich des Single-Source- Cross-Media-Publishingsverwendet
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [75103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Prinzip des Single-Source- Cross-Media-Publishingsmit XSL (XSLT bzw XSL-FO)
HTML XML Text
XML-Dokument XSL-Stylesheet
Formatter
XSLT-Prozessor
PDF RTF Print
+
MSXML Sablotron Saxon Xalan
AntennaHouse FOP XEP XINC
= Ausgabe[+ DTDSchema]
fo
xsl
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [76103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XML-Daten datenxml)
ltxml version=10 encoding=ISO-8859-1gt
ltrechteckegt
ltrechteckgt
ltlinksoben_xgt50ltlinksoben_xgt
ltlinksoben_ygt120ltlinksoben_ygt
ltbreitegt180ltbreitegt
lthoehegt75lthoehegt
ltfarbegtgreenltfarbegt
ltrechteckgt
lt-- weitere Rechteck-Definitionen --gt
ltrechteckegt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [77103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (XSL-Stylesheet vorlagexsl)
ltxml version=10 encoding=ISO-8859-1gt
ltxslstylesheet version=10 xmlnsxsl=httpwwww3org1999XSLTransformgt
ltxsloutput method=xml doctype-public=-W3CDTD SVG 11ENdoctype-system=httpwwww3orgGraphicsSVG11DTDsvg11dtdencoding=ISO-8859-1 version=10media-type=imagesvg+xml indent=yesgt
ltxsltemplate match=gt
ltsvg xmlns=httpwwww3org2000svggt
ltxslfor-each select=rechteckerechteckgt
ltrect x=linksoben_x y=linksoben_y width=breite height=hoehefill=farbegt
ltxslfor-eachgt
ltsvggt
ltxsltemplategt
ltxslstylesheetgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [78103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis ergebnissvg)
ltxml version=10 encoding=ISO-8859-1gt
ltDOCTYPE svg PUBLIC -W3CDTD SVG 11ENhttpwwww3orgGraphicsSVG11DTDsvg11dtdgt
ltsvg xmlns=httpwwww3org2000svggt
ltrect x=50 y=120 width=180 height=75 fill=greengt
ltrect x=300 y=70 width=100 height=250 fill=yellowgt
ltrect x=100 y=250 width=90 height=40 fill=redgt
ltsvggt
Umsetzung mit XMLStarlet (httpxmlstarsourceforgenet)xml tr vorlagexsl datenxml gt ergebnissvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [79103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel zur Ausgabe von Rechtecken (SVG-Ergebnis grafisch)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [80103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- Rohdaten
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [81103]
SVG im UumlberblickSVG im Uumlberblick SVG aus XML-Daten mittels XSLT erzeugen
Beispiel Einwohner-Daten des Statistischen Bundesamtes (destatisde)
- SVG-Ergebnis (einwohnersvg)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [82103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
SVG-Dokumente lassen sich mit serverseitigen SprachenTechnologienaufbauen und ausgeben
Verwendung dynamischer Textfunktionen von ASP JSP Perl PHP usw
Daten koumlnnen entsprechend als SVG-Inhalte aufbereitet werden
Wesentlich ist das Sendes des korrekten Inhaltstyps (MIME-Type)imagesvg+xml
Bei Verwendung des Apache-Webservers in httpdconf oder htaccesskonfigurieren (in mimetypes ohne AddType)
Alternativ Informationen im Header mitsenden (fuumlr PHP)header(Content-Type imagesvg+xml)
AddType imagesvg+xml svg svgz
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [83103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP
- Daten in Excel-Tabelleund Ausgabe als CSV-Dateieinwohnerdat
Sachsen-Anhalt25490002044472
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [84103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
ltphp
Dokumentenkopf ausgeben (XML-Prolog Definitionen fuumlr Filter Gradienten usw)
Daten einlesen aufbereiten und ausgeben
$daten=file(einwohnerdat)
$anzahl=count($daten)
$ew_max=1
for($i=0$ilt$anzahl$i++)
$zeile=explode(trim($daten[$i]))
$bl[$i]=$zeile[0] Bundesland
$ew[$i]=$zeile[1] Einwohnerzahl
$fl[$i]=$zeile[2] Flaeche
if($ew[$i]gt$ew_max)$ew_max=$ew[$i] max Einwohnerzahl ermitteln
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [85103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP (einwohnerphp)
Fortsetzung der SVG-Ausgabe
$max_breite=700
$faktor=$max_breite$ew_max
for($i=0$ilt$anzahl$i++)
print lttext x=20 y=intval($i25+80)gt$bl[$i]lttextgtn
print lttext class=klein x=20 y=intval($i25+90)gt[$ew[$i] | round($ew[$i]$fl[$i])]lttextgtn
print ltrect x=180 y=intval($i25+75) height=15bdquowidth=round($ew[$i]$faktor) filter=url(schatten)gtn
gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [86103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Umsetzung des Einwohner-Beispiels mit PHP - grafisches Ergebnis
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [87103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [88103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Weitere PHP-Anwendung mit SVG-Ausgabe - SVGPHP
Online verfuumlgbar unter httpwwwdatenverdrahtendesvgphp
Dat
enqu
elle
te
kom
eV
20
03
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [89103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG ndash Massenspektren darstellen
- MySQL-Datenbank mit den Rohdaten (50000 Verbindungen)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [90103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Prinzip der Verarbeitung
- Auswahlmenuuml
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [91103]
SVG im UumlberblickSVG im Uumlberblick SVG auf dem Webserver erzeugen
Anwendung MSpecSVG - Massenspektren darstellen
- Ansicht im Browser
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [92103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
(Grundlagen zur Entwicklung dynamischer interaktiver SVG-Anwendungen)
- BasisSVG statisch Kenntnisse zu Elementen AttributenCSS-Eigenschaften XML-Dokumentstruktur
- Programmierungclientseitige Skriptsprachen (JavaScript ECMAScript) Event-HandlingObjektmodell (W3C-SVG-DOM)
- Verwandte KonzepteDHTML ActionScript (FlashSWF)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [93103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Programmcode wird im Bereich von ltdefsgtltdefsgt abgelegt
intern (als CDATA-Abschnitt da reservierte Zeichen wie lt amp vorkommen koumlnnen)
ltscript type=textjavascriptgt
lt[CDATA[
JS-Code
]]gtltscriptgt
extern (als einfache Textdatei oder auch gzip-komprimiert)
ltscript xlinkhref=dateijs type=textjavascriptgt
ltscript xlinkhref=dateijsgz type=textjavascriptgt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [94103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Funktionen kapseln Codebloumlcke fuumlr den spaumlteren Aufruf
var globale Variablen
function Funktionsname1(arg)var lokale Variablen weiterer Code der Funktion
function Funktionsname2(arg1arg2)var lokale Variablen weiterer Code der Funktion
- Funktionen werden ereignisgesteuert aufgerufen
- Ablage erstellter Funktionen in Bibliotheken sinnvoll (js)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [95103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Die SVG verarbeitende Instanz (Browser Plug-in) registriertbei der Interaktion staumlndig so genannte Ereignisse (Events)
Beispiel click-Event beim Anklicken von Objekten
- Zur Reaktion auf diese Events dienen Event-Handler
Beispiel onclick-Event-Handler (Prefix on)
- Event-Handler werden als Element-Attribute verwendet
Beispiel (Aufruf einer JS-Funktion)ltcircle cx=50 cy=50 r=20 style=fill F00onclick=EineFunktion(evt)gt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [96103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Einfaches SVG-Beispiel Code
ltxml version=10 encoding=ISO-8859-1 standalone=nogtltDOCTYPE svg PUBLIC -W3CDTD SVG 10ENhttpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt
ltsvg width=340 height=100 xmlns=httpwwww3org2000svgxmlnsxlink=httpwwww3org1999xlinkgt
lttitlegtSVG-BeispiellttitlegtltdescgtEs werden je ein Text Rechteck Kreis und Polygon definiertltdescgt
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgt
ltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgt
ltcircle id=kr cx=230 cy=40 r=20 style=fill F00gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
ltsvggt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [97103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript
- Beispiel erweitert mit SVG-DOM-Zugriff
SVG-Objekte
lttext id=tx x=10 y=55 style=font-size 40pxgtHexlttextgtltrect id=re x=135 y=20 width=40 height=40 style=fill 00Cgtltcircle id=kr cx=230 cy=40 r=20 style=fill F00onclick=ChangeColor(evtreF90)gt
ltpolygon id=po points=28060 30020 32060 style=fill 090gt
JavaScript-Funktion
function ChangeColor(click_evtobjidcol)var svgdocobjtxt
svgdoc=click_evttargetownerDocumentobj=svgdocgetElementById(objid)objstylesetProperty(fillcol)
txt=svgdocgetElementById(tx)txtfirstChildnodeValue=col
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [98103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG-DOM-Scripting kompakt
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [99103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Mini-Zeichenprogramm
http
s
vglb
cda
tenv
erdr
ahte
nde
do
c=dr
awsh
apes
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [100103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Periodensystem mit Online-Datenabfrage
http
w
ww
et
fh-m
erse
burg
de
pers
onm
eini
kep
tabl
esvg
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [101103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
Leipzig-Entertainer (Diplomarbeit von Maik Boche 200405)
http
w
ww
abo
ut-s
vgd
ein
dex_
LEh
tm
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [102103]
SVG im UumlberblickSVG im Uumlberblick SVG-Aktionsprogrammierung mit JavaScript ndash Beispiele
SVG mdash Learning By Coding (Beispielsammlung)
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php
SVG im Uumlberblick ndash Dr Thomas Meinike Hochschule Merseburg (FH) ndash [103103]
SVG im UumlberblickSVG im Uumlberblick Mobile SVG-Anwendungen
Entwicklung der Beispielanwendung WEATHER 4 NOW - Demonstration
http
s
vgm
obd
aten
verd
raht
end
ew
4n_d
emo
php