FH-Hof Scalable Vector Graphics Richard Göbel
FH-Hof Einführung Scalable Vector Graphics (SVG) - Darstellung von Vektorgraphiken in einem Web-Browser Definition durch ein Konsortium aus Unternehmen wie Adobe, Apple, IBM, Kodak an Sun W3C Empfehlung seit 2003 Wichtige Eigenschaften: Plugin von Adobe für fast alle Browser verfügbar Basis ist die Extensible Markup Language (XML) Einbindung in HTML und Nutzung von JavaScript Hier: Darstellung von Vektordaten als Positionen auf einer Landkarte
FH-Hof Beispiel für eine einfache SVG-Datei
FH-Hof Einindung in eine HTML-Datei SVG Test Einfacher Test
FH-Hof Darstellungsbereich Größe des Bereichs wird durch Attribut viewbox in Element svg festgelegt! (0,0)
FH-Hof Polygone
FH-Hof Pfade aus geraden und gekrümmten Linien
FH-Hof Kommandos für einen Pfad MStift positionieren ohne Zeichnen LLinie zur angegebenen Positions HHorizontale Linie VVertikale Linie CStark gekrümmte kubische Bezierkurve SSchwach gekrümmte kubische Bezierkurve QStark gekrümmte quadratische Bezierkurve TSchwach gekrümmte quadratische Bezierkurve AElliptischer Bogen ZGeschlossener Pfad (Rücksprung) Großbuchstaben enthalten absolute Positionen Kleinbuchstaben definieren relative Positionen
FH-Hof Weitere graphische Elemente line polyline polygon circlerectellipse
FH-Hof Darstellungsstil - Attribut Style
FH-Hof Darstellungsstil - Stylesheet <![CDATA[ path.special { stroke:red; stroke-width: 4; fill: none } ]]>
FH-Hof Texte I Merkwürdiges Polygon
FH-Hof Texte II Merkwürdiges Polygon
FH-Hof Animation
FH-Hof Interaktion function showStatus(evt) { alert( "Merkwürdiges Polygon"); }
FH-Hof Attribute für Ereignisse onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup
FH-Hof Gruppieren Gruppieren verschiedener Elemente mit dem Element... Gemeinsame Attribute für die Gruppe im Element g Koordinatentransformation mit Attributen: translate(x,y) scale(sx,sy) rotate(angle,x,y) skewX(angle) skewY(angle)