<\/p>\n
In zwei Beiträgen rund um das Thema ““HTML5 als Grafikkomponente““ erfuhren Sie, wie Sie mithilfe des Webbrowser-Steuerelements und HTML5 programmgesteuert Grafiken erzeugen. über eine andere Schnittstelle, nämlich SVG, lässt sich dasselbe erreichen, wobei hier nicht Pixel-, sondern Vektorgrafiken erzeugt werden, die deutlich mehr Interaktivität zulassen und nachträglich bearbeitbar sind. <\/b><\/p>\nReferenz<\/h2>\n
Die Ausführungen dieses Beitrags setzen jene aus dem Artikel HTML5 als Grafikkomponente<\/b> in der Ausgabe 01\/2018<\/b> fort. Dort sind die Grundlagen zum Einsatz des Webbrowser-Steuerelements<\/b> im Verein mit HTML5<\/b> beschrieben, auf die hier deshalb nicht noch einmal eingegangen wird.<\/p>\nSVG als Alternative zu HTML5<\/h2>\n
über HTML5<\/b> können Sie unter Access im Webbrowser-Steuerelement Bilder anlegen, indem Sie dessen zugrundeliegendes HTML<\/b>-Objektmodell steuern. Als Ergebnis erhalten Sie eine Pixelgrafik als Summe der Grafikoperationen, deren Schritte sich nicht mehr rückgängig machen oder bearbeiten lassen.<\/p>\n
Lediglich das Abspeichern als Bilddatei oder im BLOB<\/b>-Feld einer Tabelle steht Ihnen dann noch offen. Ganz anders bei SVG<\/b>, wo die Grafik im Vektorformat entsteht, auf deren einzelne Elemente jederzeit zugegriffen werden kann. Solche Grafiken rendert der Browser dann zur Laufzeit.<\/p>\n
Es verwundert eigentlich, dass diese flexible Lösung noch von niemand aufgegriffen und umgesetzt wurde – dachte ich! Tatsächlich findet, während ich dies zu Papier bringe, in Wien die zweite Access-DevCon<\/b> statt, eine internationale Entwicklerkonferenz, welche unter anderem Vorträge von Experten zu verschiedenen Themenstellungen rund um Access anbietet. Und der litauische Entwickler Alexandru Tofan<\/b>, ein bisher weitgehend unbeschriebenes Blatt, demonstriert dort ebenfalls seine Lösungen zum Einsatz von SVG<\/b> als Grafik-Engine. Ich bin gespannt, welche ähnlichkeit seine Ausführungen zu den hier ganz unabhängig vorgestellten haben werden, falls sie veröffentlicht werden…<\/p>\n
Der Hauptgrund dafür, dass eine Implementierung von SVG<\/b> im Webbrowser Control <\/b>noch nicht stattfand, ist wohl darin zu suchen, dass Microsoft dem Internet Explorer<\/b> erst spät den Umgang mit diesem Format beibrachte. Und da das Webbrowser-Steuerelement im Rohzustand nur die Version 7<\/b> des Browsers emuliert, welche noch kein SVG<\/b> kannte, laufen die sehr wohl im HTML<\/b>-Objektmodell enthaltenen zugehörigen Methodenaufrufe ins Leere. Erst die Modifikation des Webbrowsers über die VBA-Routine PrepareBrowser<\/b>, die, wie im oben angeführtem Beitrag, schon mehrmals erläutert wurde, lässt ihn im Gewand des IE 11<\/b> erscheinen. Danach akzeptiert er anstandslos auch alle SVG<\/b>-Methoden.<\/p>\nSVG als Format<\/h2>\n
SVG<\/b> (Scalable Vector Graphics<\/b>) ist an sich ein auf XML<\/b> basierendes Dateiformat, welches seit dem Jahr 2001 existiert und kontinuierlich weiterentwickelt wurde. Dateien mit der Endung .svg<\/b> können etwa mit dem Open Source-Programm Inkscape<\/b> angezeigt oder erstellt werden, welches sich fast schon zum Standard gemausert hat. Aber auch andere Vektorzeichenprogramme beherrschen meist den Export in dieses Format. <\/p>\n
Inzwischen hat es sich aber vor allem im Web als wichtigste Schnittstelle zur Anzeige von Vektorgrafiken etabliert. Der Vorteil von Vektorgrafiken gegenüber Pixelbildern ist ja die verlustfreie Skalierbarkeit, denn solche Grafiken werden grundsätzlich erst zur Laufzeit beim Rendern in Pixel übersetzt. Bei technischen Zeichnungen, Organigrammen, Charts oder Karten ist es deshalb das Format der Wahl.<\/p>\n
Einst ging es in erster Linie um die Anzeige solcher SVG<\/b>-Grafikdateien, für die bis dahin nur ein spezielles in die Website eingebettetes Adobe<\/b>-ActiveX-Steuerelement infrage kam. Doch seit der Implementierung direkt im Browser kam auch die dynamische Steuerung der einzelnen Elemente der Grafik hinzu.<\/p>\n
So lassen sich SVG<\/b>-Grafiken nun auch ohne jeglichen Bezug zu einer Datei etwa über Javascript<\/b> anlegen und beeinflussen. Und glücklicherweise hat Microsoft im HTML<\/b>-Objektmodell des Internet Explorers alle Elemente von Javascript<\/b> nach COM<\/b> übersetzt, womit auch unter VBA Zugriff auf die entsprechenden Klassen und Methoden besteht, ohne dass Sie sich mit einer anderen Skriptsprache beschäftigen müssen.<\/p>\n
Die SVG<\/b>-Grafiken stellen nun einfach eine Folge von Grafikanweisungen dar, die im XML<\/b>-Format abgelegt sind. Der Browser interpretiert diese und rendert sie anhand der übergebenen Parameter. Dafür gibt es das neue Tag<\/b> svg<\/b>, welches allerdings nur dann korrekt interpretiert wird, wenn ein bestimmtes Namespace<\/b>-Attribut mit xmlns<\/b> hinzugefügt wird:<\/p>\n Innerhalb dieses Tags<\/b> befinden sich dann die Anweisungen. Das können Linien sein, Rechtecke, Kreise, Ellipsen, Polygone, Bezier-Kurven, Text, Füllungen, Pixeldaten oder Verweise auf Bilddateien. All diese Elemente können über Attribute mit diversen Parametern versehen werden, die deren Gestalt bestimmen. Der Clou aber sind mehrere Grafikfilter, die Sie auf einfache Weise anlegen und nach Belieben auf diese Elemente anwenden können. So kann etwa gefüllter Kreis mit einem Blur<\/b>-Filter verwaschen werden, dessen Parameter Sie ebenfalls steuern können.<\/p>\n Eine einfache Line erzeugen Sie etwa über dieses Konstrukt:<\/p>\n Hier sind dem svg<\/b>-Tag gleich die Attribute width<\/b> und height<\/b> zugeordnet, die die Abmessungen der Grafikfläche (500×300 <\/b>Pixel) festlegen. Die Linie erzeugen Sie über das line<\/b>-Tag. Die Koordinatenpunkte der Linie sind über die Werte der Attributparameter x1<\/b>, y1<\/b>, x2<\/b>, y2<\/b> definiert. Das Aussehen der Linie bestimmt nun das style<\/b>-Attribut, welches seinerseits eine Menge weiterer Definitionen aufnehmen kann, die sich aus dem Fundus der HTML-Styles <\/b>ableiten, die Sie eventuell auch abseits von SVG<\/b> kennen. So gibt stroke<\/b> etwa an, welche Farbe die Line haben soll, was hier auf Schwarz (black<\/b>) festgelegt ist.<\/p>\n Natürlich sind hier auch beliebige andere über Hexadezimalwerte definierte Farben möglich, wie #A0A0A0<\/b>, oder über die rgb<\/b>-Funktion ermittelte: <\/p>\n Die Breite der Linie steht schließlich im Parameter stroke-width<\/b> (2 Pixel).<\/p>\n übrigens können Sie innerhalb des svg<\/b>–Tags<\/b> wiederum ein oder mehrere svg-Tags<\/b> einbetten, was zu verschachtelten Zeichenflächen führt.<\/p>\n Der Witz am HTML-Objektmodell <\/b>ist aber ja, dass Sie den HTML-Text nicht unbedingt per String-Verkettung generieren müssen, sondern sich der passenden HTML-Klassen bedienen, deren Eigenschaften Sie dann einstellen. So gibt es zur Linie etwa das Element SVGLineElement<\/b>, welches Sie so erzeugen:<\/p>\n Das HTML-Dokument oDoc<\/b> erhalten Sie hier über die Document<\/b>-Eigenschaft des Webbrowser-Steuerelements WebCtl<\/b>. Normalerweise reicht die Methode createElement<\/b> aus, um auf der Website ein neues HTML-Element zu erzeugen. Hier allerdings wird die Alternative createElementNS<\/b> benötigt, weil auf den SVG-Namespace<\/b> Bezug genommen werden muss, damit der Webbrowser erkennt, um welches line<\/b>-Element es sich genau handelt.<\/p>\n So erzeugt stellen Sie nun die Eigenschaften des SVGLineElements<\/b> ein:<\/p>\n Leider sind das auch schon alle Eigenschaften, die diese Klasse bei Microsoft direkt anbietet. Alle anderen müssen Sie über die Methode setAttribute<\/b> belegen:<\/p>\n Die Methode setAttribute<\/b> finden Sie im Objektkatalog nicht unter der Klasse SVGLineElement<\/b>, und trotzdem funktioniert sie. Das liegt daran, dass sich ein SVGLineElement<\/b> versteckt vom allgemeineren IHTMLElement<\/b> ableitet, welches diese Methode aufweist. <\/p>\n Das Formular frmSVGTest<\/b> der Demodatenbank vereint die wesentlichen Techniken, die für den Einsatz von SVG<\/b> als Grafikgenerator zum Zuge kommen. Bild 1 zeigt es zur Laufzeit, nachdem auf die Schaltfläche SVG erzeugen<\/b> geklickt wurde.<\/p>\n Bild 1: Eine im Webbrowser-Steuerelement per VBA generierte SVG-Grafik<\/span><\/b><\/p>\n Das Formular enthält lediglich ein Webbrowser-Steuerelement mit dem Namen ctlIE<\/b>, dessen Steuerelementinhalt im Entwurf auf „=about:blank“<\/b> festgelegt ist und einen Button, der die Anlage der SVG<\/b>-Grafik auslöst. Damit das Webbrowser-Control mit SVG<\/b> umgehen kann, muss zuvor die Routine PrepareBrowser<\/b> des Moduls mdlWebControl<\/b> aufgerufen worden sein, welche Einstellungen der Registry modifiziert, wie dies bereits erschöpfend in den Beiträgen zu HTML5<\/b> erläutert wurde.<\/p>\n Der Klick auf den Button cmdCreate<\/b> lässt die Ereignisprozedur in Listing 1 ablaufen. Hier kommt es zunächst zum Aufruf der Hilfsroutine NavigateBlank<\/b>, die weiter unten abgebildet ist. Sie stellt per Navigate2<\/b>-Methode sicher, dass im Webbrowser ctlIE<\/b> ein leeres Dokument angelegt ist. Nachdem dieses erfolgreich fertiggestellt ist, was die Do-Loop<\/b>-Schleife mit Abfrage der ReadyState<\/b>-Eigenschaft kontrolliert, kann die modulweit deklarierte Objektvariable oDoc<\/b> auf dieses Dokument gesetzt werden. Das WithEvents<\/b> in der Deklaration ermöglicht, dass auf Ereignisse der gesamten Website, wie Mausklicks, reagiert werden kann.<\/p>\n Listing 1: Der wesentliche Code-Teil des Formulars frmSVGTest erzeugt im Click-Ereignis die Grafik<\/span><\/b><\/p>\n Im Header<\/b> des Dokuments muss anschließend eine meta<\/b>-Eigenschaft hinterlegt werden, die X-UA-Compatible<\/b> lautet, damit der Browser die SVG<\/b>-Anweisungen auch umsetzt. Dies geschieht durch Beschreiben des Tags über die Methode innerHTML<\/b> des head<\/b>-Objekts.<\/p>\n Und nun kann bereits die SVG<\/b>-Zeichenfläche im Dokument mit createElementNS<\/b> angelegt werden, wobei hier das Element-Tag svg<\/b> als String übergeben wird. Das Element landet in der Objektvariablen oSVG<\/b> vom Typ SVGSVGElement<\/b>, die ebenfalls im Kopf des Moduls mit WithEvents<\/b> deklariert ist, damit auf Ereignisse speziell der Zeichenfläche reagiert werden kann.<\/p>\n Die Zeichenfläche ist damit zwar erstellt, hat bislang jedoch noch keine definierten Abmessungen. Dies holt der folgende With<\/b>-Block auf die Objektvariable nach. Um die Breite des svg<\/b>-Elements einzustellen, können Sie zwei Methoden einsetzen. Die eine ist das Setzen des width<\/b>-Attributs über die Methode setAttribute<\/b>, die andere die Nutzung der eingebauten Eigenschaft Width<\/b> der Objektklasse. Letztes geschieht hier. Allerdings handelt es sich bei Width<\/b> nicht etwa um einen Integer-Wert, sondern um einen speziellen zusammengesetzten SVG<\/b>-Datentyp, dessen Eigenschaft baseVal.Value<\/b> verwendet werden muss. Sie bekommt den Wert 300<\/b> Pixel zugewiesen. ähnliches erfolgt für die Höhe der Fläche und Height<\/b>. Und dann erhält die Zeichenfläche noch eine Hintergrundfarbe, die über das Style<\/b>-Attribut backgroundColor<\/b> mit einem hexadezimalen Grau-Wert versehen wird. Das SVG<\/b>-Objekt wird erst in das Dokument geschrieben und damit sichtbar, wenn es am Ende der Routine über appendChild<\/b> an den Body<\/b> oDoc.body <\/b>angehängt wird. Zuvor muss jedoch noch der SVG<\/b>-Kreis erzeugt und an das SVG<\/b>-Objekt selbst angehängt sein.<\/p>\n Deshalb generiert createElementNS<\/b> nun ein Element circle<\/b> und weist es als Objekt der Variablen oSVGElement<\/b> vom MSHTML<\/b>-Typ SVGCircleElement<\/b> zu. Sie verweist nun auf ein abstraktes Kreis-Objekt, dessen Eigenschaften erst noch eingestellt werden müssen. Der folgende With<\/b>-Block mit den setAttribute<\/b>-Anweisungen übernimmt dies. Die Mittelpunktkoordinate wird mit cx<\/b> und cy<\/b> festgelegt, der Radius in r<\/b> – ohne dezidierte Angabe von Einheiten geht der Browser dabei von Pixeln aus. Dem Element wird ein eindeutiger Bezeichner Kreis<\/b> über die id<\/b> spendiert, damit es später identifizierbar und damit sogar auch dynamisch bearbeitbar ist. Die Farbe des Kreises steht in stroke<\/b>, die Linienbreite in stroke-width<\/b> und die Füllfarbe im Attribut fill<\/b>. Das Kreiselement wird schließlich mit appendChild<\/b> an das SVG<\/b>-Flächenelement oSVG<\/b> angehängt, welches selbst dann in den Body<\/b> geschrieben wird. Ab nun ist die Grafik tatsächlich sichtbar.<\/p>\n Obwohl wir nur mit MSHTML<\/b>-Objekten hantieren und keinerlei String-Bearbeitung einsetzen, übersetzt sich das Ganze automatisch in gültigen HTML<\/b>-Text. Die Debug.Print<\/b>-Anweisung verdeutlicht, was dabei herauskommt und gibt im VBA-Direktfenster diesen String aus, der hier der übersicht halber mit Einrückungen formatiert wurde:<\/p>\n Es liegt weit außerhalb des Radius dieses Beitrags, alle SVG<\/b>-Elemente mit ihren Parametern darzustellen. Empfehlung: Schauen Sie sich etwa auf der deutschen Seite SELFHTML<\/b> um, die unter der Rubrik SVG<\/b> mit vielen Beispielen erschöpfend Auskunft gibt. Dort sind die möglichen Elemente und ihre Attribute gut erläutert. Das Vorgehen zur übersetzung der HTML-Tags<\/b> nach VBA ist dann immer dasselbe. Sie erzeugen ein Element über die Funktion createElementNS<\/b> unter Angabe des Element-Tags, weisen es einer Objektvariablen zu, die den generellen Typ SVGElement<\/b> haben kann – oder auch schlicht Object<\/b> -, und setzen dessen Eigenschaften am besten über setAttribute<\/b>-Anweisungen innerhalb eines With<\/b>-Blocks.<\/p>\n Das Formular frmSVGTest<\/b> enthält noch eine weitere Schaltfläche Komplexes SVG<\/b>, deren Betätigung zur Grafik in Bild 2 führt. Hier sind genau zwei SVG-Elemente angelegt, nämlich ein gelber Kreis mit grüner Umrandung und das Bild einer Tulpe aus einer JPG-Datei. Auf das Bild wird aber ein Weichzeichnenfilter angewandt, auf den Kreis ein Turbulenzfilter. Hier kommen neue Techniken ins Spiel.<\/p>\n Bild 2: Einsatz von Filtern für die komplexere SVG-Grafik per VBA<\/span><\/b><\/p>\n Das Prinzip ist allerdings das gleiche, wie im vorigen Beispiel. Ein SVG<\/b>-Element wird angelegt und an den Body<\/b> des über about:blank<\/b> erzeugten Dokuments gehängt. Das Vorgehen, um die Bilddatei in die Grafik zu bekommen, ist hier nicht trivial. Zwar könnte man das Attribut href<\/b> des image<\/b>-Elements mit dem absoluten Pfad zur Datei belegen, doch beim Verschieben der Datenbank und der Bilddatei tulpe.jpg<\/b> in ein anderes Verzeichnis wäre der Bezug verloren. Deshalb wird aus der Bilddatei ein sogenanntes binäres data-URI<\/b> erzeugt und dessen Inhalt dem Bildelement unmittelbar übergeben. Hintergrund dafür ist zusätzlich, dass sich so auch Dateien, die etwa in OLE-Feldern<\/b> von in Tabellen abgespeichert sind, ebenfalls zur Ansicht bringen lassen. Das data-URI <\/b>kommt dabei als base64<\/b>-kodierter String in das Dokument. Diese Funktionalität kam bereits im früheren Beitrag zum Zeichnen und Malen mit HTML5<\/b> zum Einsatz.<\/p>\n Einen Teil der Ereignisprozedur cmdCreateComplex_Click<\/b> zeigt Listing 2. Die Bilddatei wird zuerst mit der Open<\/b>-Anweisung in das Byte-Array bin<\/b> eingelesen. Dann wird das leere SVG<\/b>-Bildelement über das Tag image<\/b> erzeugt.<\/p>\n Listing 2: Einlesen der Bilddatei in ein Byte-Array und übergeben desselben an das SVG-image-Element<\/span><\/b><\/p>\n Es bekommt die id<\/b> dataimage<\/b>, die Breite und Höhe 200px<\/b> (width<\/b>, height<\/b>), und die Bilddaten über href<\/b> aus einem Hexadezimal-String, der mittels der Hilfsfunktion EncodeBase64<\/b> im Modul mdlHelper<\/b> aus dem Array erzeugt wird. Der Internet Explorer<\/b> zeigt das Bild dann allerdings aus Sicherheitsgründen erst an, wenn zusätzlich die Eigenschaft crossOrigin<\/b> auf anonymous<\/b> gesetzt wird, weil sonst die Herkunft der Binärdaten für ihn ungeklärt ist.<\/p>\n Das Weichzeichnen kommt schließlich zustande, indem Sie der filter<\/b>-Eigenschaft den Ausdruck url(#blur)<\/b> übergeben. Darin verweist der Bezeichner blur<\/b> auf einen SVG-Filter<\/b>, der allerdings schon eigenständig angelegt sein muss. Auch dies lässt sich über SVG<\/b>-Objekte bewerkstelligen. Im ersten Schritt wird das Filter<\/b>-Objekt erzeugt:<\/p>\n Er bekommt als Eigenschaft lediglich die id<\/b> blur<\/b>. Denn das Filter-Objekt bewirkt selbst noch keinen Filtereffekt und stellt nur einen Container<\/b> für einen oder mehrere Effekte dar. Ein SVG<\/b>-Element kann nur über diesen etwas umständlichen Weg mit einem Bildeffekt versehen werden. Dem Element muss im Attribut filter<\/b> der Name des Filters übergeben werden, wobei die Syntax url(# Das geschieht in der Prozedur so:<\/p>\n Das SVG<\/b>-Element ist hier vom Typ feGaussianBlur<\/b> und erzeugt einen Gaussschen Weichzeichner. Seine Eigenschaft stdDeviation<\/b> bestimmt den Radius des Weichzeichnens – je höher, desto verwischter. Das Attribut in<\/b> gibt an, woher die Ausgangsgrafik kommt. Mit dem Wert sourceGraphic<\/b> bestimmen Sie, dass das SVG<\/b>-Element selbst dafür herangezogen wird. Das Effektobjekt hängen Sie schließlich an das Filterobjekt an und dieses selbst an das SVG<\/b>-Objekt, also die generelle SVG<\/b>-Fläche.<\/p>\n <\/p>\n Dabei spielt es keine Rolle, in welcher Reihenfolge Sie vorgehen. Sie können erst das Filterobjekt erzeugen und dann das SVG<\/b>-Zeichenelement, oder umgekehrt. MSHTML<\/b> analysiert die Sache selbst und generiert aus den Objekten die funktionierenden HTML<\/b>-Anweisungen.<\/p>\n Mit dem Turbulenzfilter für das Kreiselement wird es nochmals komplizierter. Hier müssen nämlich zwei Effekte miteinander kombiniert werden. Der eine SVG-Effekt erzeugt einen Turbulenzgenerator:<\/p>\n Der neue Filter bekommt die willkürliche id<\/b> turb<\/b>. Ihm wird ein Effekt des Typs feTurbulence<\/b> spendiert, auf dessen Parameter wir nicht weiter eingehen. Sie sind andernorts ausführlich dargestellt. Nun handelt es sich bei diesem Effekt lediglich um eine Art abstrakten Generator, der ein zweidimensionales Rauschen hervorbringt. Auf ein SVG<\/b>-Element angewandt wüsste der Browser noch nicht, was er mit dem Rauschen anfangen soll. Denn der Generator besitzt keinen Eingang in<\/b>! Darum muss an den Filter noch ein weiterer Effekt angehängt werden, wobei wir hier einen Verschiebeeffekt nutzen, der die Pixel des Ausgangselements um den Wert eines Rauschens verschiebt:<\/p>\n Der SVG<\/b>-Effekt trägt den Namen feDisplacementMap<\/b>. Er besitzt zwei Eingänge, mit in<\/b> die Herkunft der Grafik, auf die der Effekt angewandt werden soll, und mit in2<\/b> den Turbulenzeffekt. Zusätzlich kann mit scale<\/b> noch angegeben werden, wie stark sich der Effekt aus in2<\/b> ausdehnt, also skaliert. Auch dieser Effekt wird dem Filterelement angehängt. Erst jetzt kann der Filter dem Kreis übergeben werden:<\/p>\n Im letzten Attribut wird der Filter turb<\/b> angewiesen, und schon verzerren sich der Kreis und dessen Füllung entsprechend dem Turbulenzgenerator.<\/p>\n Dies sind nur zwei Beispiele für SVG<\/b>-Filter, die die grundsätzliche Vorgehensweise verdeutlichen sollen. Insgesamt kennt SVG<\/b> aktuell 16 solcher Filtereffekte, wobei bei diesen weniger an Bildbearbeitung gedacht wurde, als an die für Zeichnungen und Texte nützliche. Deshalb handelt es sich bei vielen um solche für Farbkombinationen oder -verschiebungen oder Elementkombinationen. Die entsprechende SELFHTML<\/b>-Seite zu SVG\/Filter<\/b> gibt eine gute übersicht.<\/p>\n Um es nochmals deutlich zu machen: Sie können die Filter auf jedes beliebige SVG<\/b>-Grundelement anwenden! Also nicht nur auf Kreise, Rechtecke, Linien, Polygonzüge oder Kurven, sondern etwa auch auf Text. Allerdings muss es sich dann bei Letzterem um SVG<\/b>-Textelemente handeln. Ein Textelement legen Sie dergestalt an:<\/p>\n Das Element text<\/b> platziert sich auf der SVG<\/b>-Fläche an der Koordinate 20\/30<\/b> (linke obere Ecke des Textblocks) und hat den über style<\/b> definierten Schriftstil Calibri<\/b> mit der Höhe 12 Pixel<\/b>. Die Schriftfarbe steht in fill<\/b> mit einem hexadezimalen Dunkelgrau. Den eigentlichen Text schreiben Sie dann in die Eigenschaft innerText<\/b>.<\/p>\n Imgrunde kann jedes HTML<\/b>-Element Events, wie Mausklicks, auslösen, die Sie in Klassenmodulen abfangen können, wenn Sie eine modulweit per WithEvents<\/b> deklarierte Objektvariable auf sie setzen. Das verhält sich bei SVG<\/b>-Elementen ebenso. Allerdings leiten sich die dabei verfügbaren Ereignisse praktisch alle von der allgemeinen Klasse HTMLElement<\/b> ab, die allen SVG<\/b>-Elementen untergeschoben ist. Aber gerade hier haben SVG<\/b>-Grafiken einen enormen Vorteil gegenüber HTML5<\/b>-Grafiken. Da die Elemente alle zur Laufzeit gerendert werden, kann jederzeit auf sie Bezug genommen werden. Ein Element können Sie etwa zur Laufzeit löschen oder über seine Attributparameter verändern.<\/p>\n Nun ist es etwas mühsam allen SVG<\/b>-Elementen bei komplexeren Grafiken jeweils eine Objektvariable zuzuweisen, um auf deren Ereignisse zu reagieren. Da verliert man schon mal die übersicht. Das ist indessen auch gar nicht nötig, weil es eine kompaktere Lösung gibt. Dabei wird etwa für einen Mausklick lediglich das entsprechende Event des HTML-Dokuments selbst abgefangen und erst innerhalb dieser Ereignisprozedur das Element abgefragt, welches das Ereignis auslöste. Im Formular frmSVGTest<\/b> ist auch dies implementiert.<\/p>\n Der Ausgangspunkt ist dabei das HTML<\/b>-Dokument, welches der Variablen oDoc<\/b> zugewiesen wird:<\/p>\n Der Klick auf irgendeine Stelle im fertigen Dokument löst dann ein Click<\/b>-Ereignis aus, das von einer Ereignisprozedur verarbeitet werden kann:<\/p>\n Der Trick ist hier, dass eine weitere Objektvariable oEvent<\/b> auf die Event<\/b>-Eigenschaft des Browser-Fensters gesetzt wird. Sie ist so deklariert:<\/p>\n Und dieser Objekttyp kennt unter anderen die Methode Button<\/b>, die Auskunft über die Maustaste gibt, welche gedrückt wurde. Eine 0<\/b> bedeutet dabei linke Maustaste. Die Bedingung in der Prozedur wertet dies aus und entscheidet dann über ein Select-Case<\/b>-Statement auf die ID<\/b> des auslösenden Elements (srcElement<\/b>), wie weiter verfahren wird. Handelt es sich um den SVG<\/b>-Kreis, der zuvor generiert wurde und dessen id<\/b> Kreis<\/b> lautet, dann erscheint eine Meldung. In den Select-Case<\/b>-Block können Sie nun beliebig viele Elemente abfragen und individuell auf sie reagieren. Voraussetzung ist natürlich, dass alle mit einem eindeutigen id<\/b>-Attribut ausgestattet wurden.<\/p>\n Möchten Sie dennoch auf ein Element direkt zugreifen, dann geschieht das so, wie beim Tulpenbild im Formular:<\/p>\n Natürlich muss dazu die Objektvariable auf das angelegte SVG-Bildelement verweisen, was sinnvollerweise bereits beim Erzeugen per createElementNS<\/b> geschieht.<\/p>\n Ein etwas speziellerer Fall ist das Ereignis bei der rechten Maustaste. Das fängt man eher nicht mit dem onclick<\/b>-Ereignis ab, sondern mit dem dafür vorgesehenen oncontextmenu<\/b>, weil die Aktion in der Regel ein Kontextmenü hervorruft:<\/p>\n Wenn Sie diese Ereignisprozedur einsetzen, so erscheint also eine Meldung, nicht aber das Kontextmenü. Grund hierfür ist der Umstand, dass es sich um eine Funktion handelt, der Sie einen Boolean<\/b>-Wert zuweisen können. Ohne weitere Programmierung ist der Rückgabewert deshalb False<\/b>. Tatsächlich können Sie dies aber ändern, indem Sie statt der Msgbox<\/b> diese Zeile einfügen:<\/p>\n Nun erscheint beim Rechtsklick auf das Tulpenbild tatsächlich das Kontextmenü.<\/p>\n Einfacher aber ist es wieder, sich das globale Kontextmenü des Dokuments zunutze zu machen:<\/p>\n Auch hier wird wieder das Event<\/b>-Objekt befragt und anhand der id<\/b> des auslösenden Elements entschieden, welche Aktion ausgelöst wird. Beim einfachen Kreis kommt es zu einer Meldung ohne Kontextmenü. Bei Turbulenzkreis des zweiten Beispiels, der die id<\/b> displacedcircle<\/b> trägt, wird stattdessen das Kontextmenü des Dokuments aktiviert.<\/p>\n Das Kontextmenü des Dokuments lässt sich allerdings nur mit großem Aufwand modifizieren oder mit eigenen Einträgen bestücken. Die MSHTML<\/b>-Bibliothek reicht dafür nicht aus, und die in früheren Beiträgen eingesetzte Bibliothek oleexp.tlb<\/b> müsste her, weil es hier um den Umgang mit speziellen Interfaces geht. Das lassen wir außen vor. Es ist dann aber fraglich, ob das Standardkontextmenü in einer SVG<\/b>-Grafik etwas zu suchen hat und den Anwender eher verwirrt. Schalten Sie es einfach ab, indem Sie die obige Ereignisfunktion einsetzen, aber keinerlei Code in sie schreiben.<\/p>\n Im Beitrag zu HTML5<\/b> lernten Sie die Anlage von Balken- und Tortendiagrammen auf Basis der Daten eines Recordsets<\/b> kennen. In der Beispieldatenbank zum aktuellen Beitrag bilden wir exakt dieselbe Funktionalität ab und versuchen dabei auch möglichst die gleichen Prozedurnamen zu verwenden. Eingesetzt wird nun jedoch nicht HTML5<\/b>, sondern SVG<\/b>.<\/p>\n Rufen Sie dazu das Formular frmSVGDiagram<\/b> auf klicken auf Erzeuge Diagramm<\/b>. Es entsteht ein Balkendiagramm, welches genau der Version unter HTML5<\/b> entspricht (siehe Bild 3), egal, ob Sie das Diagramm für Monatsumsätze oder Umsatz nach Ländern auswählen.<\/p>\n Bild 3: Die Balkendiagramme des Formulars frmSVGDiagram präsentieren sich wie ein Ebenbild der HTML5-Version (frmHTML5Diagram)<\/span><\/b><\/p>\n Nur das Tortendiagramm weicht in seiner Gestalt etwa ab, weil hier auf die Texte zusätzlich ein zusammengesetzter SVG<\/b>-Effekt angewendet wird, der zu Demonstration einen DropShadow<\/b>-Schatten nachbildet (siehe Bild 4). Tatsächlich entspricht der Entwurf des Formulars genau der HTML5<\/b>-Version. Und auch der Code zeigt nur wenige Abweichungen. Statt der für das Generieren des Balkendiagramms verantwortlichen Klasse clsHTML5Diagram<\/b> kommt nun das neue Klassenmodul clsSVGDiagram<\/b> zum Zug, für die Tortengrafik das Klassenmodul clsSVGPieChart<\/b>. <\/p>\n Bild 4: Auch die SVG-Tortengrafiken entsprechen den HTML5-Versionen, zeigen bei den Texten jedoch zusätzlich einen bläulichen Schatten<\/span><\/b><\/p>\n Deren Prozeduren haben deshalb auch die gleichen Namen, so dass die Versionen schnell austauschbar wären. Die neuen Klassen instanziieren sich ebenfalls im Load<\/b>-Ereignis des Formulars:<\/p>\n Zu besprechen ist folglich nicht das neue Formular selbst, sondern die neuen Klassenmodule. Dabei wird jedoch nur auf das eingegangen, was die Module von den HTML5<\/b>-Versionen unterscheidet und sich zuvörderst in der Prozedur PaintData<\/b> niederschlägt.<\/p>\n Das Diagramm wird im Webbrowser-Steuerelement über die Prozedur CreateDiagramDoc<\/b> erzeugt, der Sie lediglich über den Objektparameter einen Verweis auf den Browser übergeben. Der Rest erfolgt automatisch. Natürlich übernimmt diese Prozedur nun nicht mehr die Anlage eines HTML5-Canvas<\/b> im Dokument, sondern die eines SVG<\/b>-Elements, wie Listing 3 verdeutlicht. Es ist wieder in einen DIV<\/b>-Bereich eingebettet, der es im Zweifel einfacher gestattet, die Grafik im Dokument zu verschieben, ohne die eigentliche SVG<\/b>-Grafik anzufassen. Der Teil zum Erzeugen der Diagrammelemente ist in die Prozedur PaintData<\/b> ausgegliedert, die hier abschließend aufgerufen wird. Ihre 120 Zeilen können wir hier nicht in einem Listing abbilden und beschränken uns auf die für SVG<\/b>-Elemente relevanten Teile aus ihr.<\/p>\n Listing 3: Die Routine legt ein Dokument samt SVG im Browser an.<\/span><\/b><\/p>\n Der Diagrammrahmen wird über ein Rechteckelement erzeugt:<\/p>\n Weil die wiederholte übergabe des Namespace<\/b>-Arguments an die MSHTML<\/b>-Methode createElementNS<\/b> etwas ermüdend ist, gibt es die Hilfefunktion CreateSVGElement<\/b>, der Sie nur noch das Element-Tag<\/b> übergeben. Die Hilfsfunktion fügt den Namespace<\/b> hinzu:<\/p>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"> (Inhalt) <svg><\/pre>\n
<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n height=\"300\" width=\"500\">\r\n<line x1=\"0\" y1=\"0\" x2=\"200\" y2=\"200\"\r\n style=\"stroke:black;stroke-width:2\"\/>\r\n<\/svg><\/pre>\n
stroke:rgb(40,20,105)<\/pre>\n
SVG dynamisch unter VBA erzeugen<\/h2>\n
Dim <\/span>oDoc As <\/span>HTMLDocument\r\nDim <\/span>oSVGLine As <\/span>SVGLineElement\r\nSet<\/span> oDoc = WebCtl.Object.Document \r\nSet<\/span> oSVGLine = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"line\")<\/pre>\noSVGLine.x1 = 0: oSVGLine.y1 = 0\r\noSVGLine.x2 = 200: oSVGLine.y2 = 200<\/pre>\n
oSVGLine.setAttribute \"stroke\", \"black\"\r\noSVGLine.setAttribute \"stroke-width\", \"2\"<\/pre>\n
SVG-Grafik-Beispiel<\/h2>\n
![\"Eine](\"..\/fileadmin\/_temp_\/2018_03\/frmSVGTest_Simple.png\")
<\/p>\nPrivate <\/span>WithEvents oDoc As <\/span>HTMLDocument\r\nPrivate <\/span>WithEvents oSVG As <\/span>SVGSVGElement\r\nPrivate <\/span>oEvent As <\/span>IHTMLEventObj\r\nPrivate Sub <\/span>cmdCreate_Click()\r\n Dim <\/span>oSVGElement As <\/span>SVGCircleElement\r\n Dim <\/span>oElement As <\/span>IHTMLElement\r\n \r\n NavigateBlank\r\n oDoc.head.innerHTML = \"<head><meta http-equiv=\"\"X-UA-Compatible\"\"\/><\/head>\"\r\n \r\n Set<\/span> oSVG = oDoc.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\")\r\n With<\/span> oSVG\r\n .Width.baseVal.Value = 300\r\n .Height.baseVal.Value = 250\r\n .Style.backgroundColor = \"#e0e0e0\"\r\n End With<\/span>\r\n \r\n Set<\/span> oSVGElement = oDoc.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\")\r\n With<\/span> oSVGElement\r\n .setAttribute \"id\", \"Kreis\"\r\n .setAttribute \"cx\", \"50\"\r\n .setAttribute \"cy\", \"50\"\r\n .setAttribute \"r\", \"40\"\r\n .setAttribute \"stroke\", \"darkblue\"\r\n .setAttribute \"stroke-width\", \"4\"\r\n .setAttribute \"fill\", \"red\"\r\n End With<\/span>\r\n oSVG.appendChild oSVGElement\r\n \r\n oDoc.body.appendChild oSVG\r\n Debug.Print<\/span> oDoc.all(0).outerHTML\r\nEnd Sub<\/span>\r\nSub <\/span>NavigateBlank()\r\n ctlIE.Object.Navigate2 \"about:blank\"\r\n Do\r\n DoEvents\r\n Loop<\/span> Until ctlIE.Object.ReadyState = 4\r\n Set<\/span> oDoc = ctlIE.Object.Document\r\nEnd Sub<\/span><\/pre>\n<html>\r\n <head><meta http-equiv=\"X-UA-Compatible\"\"\/><\/head>\r\n <body>\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n style=\"background-color: rgb(224, 224, 224);\"\r\n width=\"300\" height=\"250\">\r\n <circle id=\"Kreis\" \r\n fill=\"red\" stroke=\"darkblue\" stroke-width=\"4\"\r\n cx=\"50\" cy=\"50\" r=\"40\" \/>\r\n <\/svg>\r\n <\/body>\r\n<\/html><\/pre>\n
SVG Knowledgebase<\/h2>\n
SVG-Filter<\/h2>\n
![\"Einsatz](\"..\/fileadmin\/_temp_\/2018_03\/frmSVGTest_Complex.png\")
<\/p>\n...\r\n Open CurrentProject.Path & \"\\tulpe.jpg\" For Binary Access Read As <\/span>#1\r\n ReDim bin(LOF(1) - 1)\r\n Get #1, , bin\r\n Close #1\r\n \r\n Set<\/span> oSVGElement = oDoc.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"image\")\r\n With<\/span> oSVGElement\r\n .setAttribute \"id\", \"dataimage\"\r\n .setAttribute \"width\", \"200\"\r\n .setAttribute \"height\", \"200\"\r\n .setAttribute \"href\", \"data:image\/jpeg;base64,\" & EncodeBase64(bin)\r\n .setAttribute \"crossOrigin\", \"anonymous\"\r\n .setAttribute \"filter\", \"url(#blur)\"\r\n End With<\/span>\r\n oSVG.appendChild oSVGElement\r\n...<\/pre>\nSet<\/span> oSVGFilter = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"filter\")\r\noSVGFilter.setAttribute \"id\", \"blur\"<\/pre>\nSet<\/span> oSVGEffect = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"feGaussianBlur\")\r\noSVGEffect.setAttribute \"in\", \"SourceGraphic\"\r\noSVGEffect.setAttribute \"stdDeviation\", \"10\"\r\noSVGFilter.appendChild oSVGEffect\r\noSVG.appendChild oSVGFilter<\/pre>\nSet<\/span> oSVGFilter = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"filter\")\r\noSVGFilter.setAttribute \"id\", \"turb\"\r\n \r\nSet<\/span> oSVGEffect = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"feTurbulence\")\r\noSVGEffect.setAttribute \"type\", \"fractalNoise\"\r\noSVGEffect.setAttribute \"baseFrequency\", \"0.03\"\r\noSVGEffect.setAttribute \"numOctaves\", \"3\"\r\noSVGEffect.setAttribute \"stitchTiles\", \"stitch\"\r\noSVGFilter.appendChild oSVGEffect<\/pre>\nSet<\/span> oSVGEffect = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"feDisplacementMap\")\r\noSVGEffect.setAttribute \"in\", \"SourceGraphic\"\r\noSVGEffect.setAttribute \"in2\", \"turbulence\"\r\noSVGEffect.setAttribute \"scale\", \"50\"\r\noSVGFilter.appendChild oSVGEffect<\/pre>\nSet<\/span> oSVGElement = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"circle\")\r\nWith<\/span> oSVGElement\r\n .setAttribute \"id\", \"displacedcircle\"\r\n .setAttribute \"cx\", \"50\"\r\n .setAttribute \"cy\", \"50\"\r\n .setAttribute \"r\", \"40\"\r\n .setAttribute \"stroke\", \"green\"\r\n .setAttribute \"stroke-width\", \"4\"\r\n .setAttribute \"fill\", \"yellow\"\r\n .setAttribute \"filter\", \"url(#turb)\"\r\nEnd With<\/span>\r\noSVG.appendChild oSVGElement<\/pre>\nSet<\/span> oSVGElement = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", \"text\")\r\nWith<\/span> oSVGElement\r\n .setAttribute \"x\", 20\r\n .setAttribute \"y\", 30\r\n .setAttribute \"style\", _\r\n \"font-family:Calibri;font-size:12px;fill:#404040;\"\r\n .innerText = \"Ein SVG-Textelement\"\r\nEnd With<\/span><\/pre>\nSVG-Ereignisse<\/h2>\n
Private <\/span>WithEvents oDoc As <\/span>HTMLDocument<\/pre>\nPrivate Function <\/span>oDoc_onclick() As Boolean<\/span>\r\n Set<\/span> oEvent = oDoc.parentWindow.event\r\n If <\/span>oEvent.Button = 0 Then<\/span>\r\n Select Case oEvent.srcElement.ID\r\n Case <\/span>\"Kreis\"\r\n MsgBox<\/span> \"Kreis angeklickt\", vbExclamation\r\n End Select<\/span>\r\n End If<\/span>\r\nEnd Function<\/span><\/pre>\nPrivate <\/span>oEvent As <\/span>IHTMLEventObj<\/pre>\nPrivate <\/span>WithEvents oSVGImage As <\/span>SVGImageElement \r\n...\r\nPrivate Function <\/span>oSVGImage_onclick() As Boolean<\/span>\r\n MsgBox<\/span> \"SVG Bild angeklickt\"\r\nEnd Function<\/span><\/pre>\nPrivate Function <\/span>oSVGImage_oncontextmenu() As Boolean<\/span>\r\n MsgBox<\/span> \"Statt svg image Kontextmenü\"\r\nEnd Function<\/span><\/pre>\noSVGImage_oncontextmenu = True<\/span><\/pre>\nPrivate Function <\/span>oDoc_oncontextmenu() As Boolean<\/span>\r\n Set<\/span> oEvent = oDoc.parentWindow.event\r\n Select Case oEvent.srcElement.ID\r\n Case <\/span>\"displacedcircle\"\r\n oDoc_oncontextmenu = True<\/span>\r\n Case <\/span>\"Kreis\"\r\n MsgBox<\/span> \"Kreis rechtsgeklickt\", vbInformation\r\n End Select<\/span>\r\nEnd Function<\/span><\/pre>\nDiagramme mit SVG<\/h2>\n
![\"Die](\"..\/fileadmin\/_temp_\/2018_03\/frmSVGDiagram_Bars1.png\")
<\/p>\n![\"Auch](\"..\/fileadmin\/_temp_\/2018_03\/frmSVGDiagram_Pie.png\")
<\/p>\nPrivate <\/span>CDgm As <\/span>clsSVGDiagram\r\nPrivate <\/span>CDgmPie As <\/span>clsSVGPieChart\r\nPrivate Sub <\/span>Form_Load()\r\n Set<\/span> CDgm = New<\/span> clsSVGDiagram\r\n Set<\/span> CDgmPie = New<\/span> clsSVGPieChart\r\nEnd Sub<\/span><\/pre>\nFunction <\/span>CreateDiagramDoc(Browser As <\/span>WebBrowser) \r\n Dim <\/span>oDiv As <\/span>HTMLDivElement\r\n Dim <\/span>oElmt As <\/span>IHTMLElement\r\n \r\n On Error GoTo<\/span> Fehler\r\n Set<\/span> oDoc = Browser.Document\r\n oDoc.body.setAttribute \"bgColor\", ColorToStr(vbWhite)\r\n oDoc.head.innerHTML = _\r\n \"<meta http-equiv=\"\"X-UA-Compatible\"\"\/>\"\r\n \r\n Set<\/span> oDiv = oDoc.createElement(\"div1\")\r\n oDiv.ID = \"div1\"\r\n \r\n Set<\/span> oSVG = CreateSVGElement(\"svg\")\r\n oSVG.setAttribute \"id\", \"svgimage\"\r\n oSVG.setAttribute \"width\", CStr(m_Width)\r\n oSVG.setAttribute \"height\", CStr(m_Height)\r\n oDiv.appendChild oSVG\r\n oDoc.body.appendChild oDiv\r\n PaintData\r\n CreateDiagramDoc = True<\/span>\r\nEnde:\r\n Exit Function<\/span>\r\nFehler:\r\n MsgBox<\/span> Err.Description, vbCr<\/span>itical\r\n Resume Ende\r\nEnd Function<\/span><\/pre>\nSet<\/span> oSVGElement = CreateSVGElement(\"rect\")<\/pre>\nPrivate Function <\/span>CreateSVGElement( _\r\n ByVal tag As String<\/span>) As <\/span>SVGElement\r\n Set<\/span> CreateSVGElement = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", tag)\r\n