Kasten erstellen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Was nun natürlich noch fehlt, sind die Kästen. Wie sie erzeugt und per Skript gesteuert werden, wird nachfolgend an je einem eckigen und einem runden Kasten gezeigt. Für alle weiteren benötigten Kästen brauchen Sie nur Kopien anzufertigen und diese entsprechend zu benennen und mit Inhalt zu füllen.

Die eckigen Kästen können Sie nacheinander am Ende der SVG-Datei definieren. Dazu verwenden Sie den <use>-Tag wie folgt. Wichtig ist dabei, dass Sie alle Inhalte des Kastens, also den Kasten selbst, den "Schließen"-Button, den Tooltip und den Inhalt in einer Gruppe definieren, die Sie dann über die visibility-Eigenschaften ein- und ausblenden können. Im <g>-Tag können Sie die Position des Kastens über das transform-Attribut festlegen und sollten auf jeden Fall auch das style-Attribut mit der Angabe visibility:hidden angeben, damit der Kasten beim Laden der Grafik so lange nicht sichtbar ist, bis er eingeblendet wird. Beide Attribute werden jedoch durch das Skript verändert. Daher ist es wichtig, auch dann das transform-Attribut anzugeben, wenn eine Positionierung nur durch das Skript erfolgen soll.

Hinweis:
Für die ersten Tests bis Formatierung und Inhalt stimmen ist es natürlich sinnvoll, den Kasten einzublenden. Geben Sie dazu einfach visibility:visible an.

Wichtig ist, dass die Gruppe die id K01 bekommt. Wenn Sie einen anderen Namen wählen, müssen Sie den Quellcode anpassen. Außerdem sollte der gewählte Name so sein, dass er die Berechnung der Namen für den Button und den Tooltip ermöglicht. Der Button bekommt dazu die id I01, sodass nur der Anfangsbuchstabe ausgetauscht werden muss, und der Tooltip bekommt den Namen TI01. Es muss also vor den Namen des Buttons nur ein T geschrieben werden.

Der folgende <use>-Tag definiert zunächst den Kasten, dessen Größe über die scale-Anweisung im transform-Attribut an den Inhalt angepasst werden kann. Wichtig ist, dass Sie im style-Attribut visibility:inherit verwenden. Das bewirkt nämlich, dass beim Ausblenden der Gruppe auch der Kasten unsichtbar wird. Wenn die Gruppe wieder eingeblendet wird, wird auch der Kasten wieder sichtbar. Danach werden die einzelnen Texte des Kastens definiert. Die Überschrift wird dazu mit class="titel" und der eigentliche Text mit class="info" formatiert.

<g id="K01" transform="translate(0,0)" style="visibility:hidden">
  <use x="0" y="0" xlink:href="#smKasten" transform="scale(0.5)" style="visibility:inherit;opacity:0.8"/>
  <text x="5" y="20" class="titel">Was ist SVG?</text>
  <text x="5" y="50" class="info">SVG ist die Abkürzung für Scalable </text>
  <text x="5" y="65" class="info">Vector Graphics und stellt ein neues </text>
  <text x="5" y="80" class="info">Vektorgrafikformat dar. Es basiert </text>
  <text x="5" y="95" class="info">auf XML und ist äußerst flexibel ein-</text>
  <text x="5" y="110" class="info">zusetzen. SVG-Dateien zeichnen sich </text>
  <text x="5" y="125" class="info">durch geringe Dateigrößen aus und </text>
  <text x="5" y="140" class="info">können animiert und per Skript mani-</text>
  <text x="5" y="155" class="info">puliert werden.</text>
  <use id="I01" x="323" y="330" xlink:href="#smButton" transform="scale(0.5)" style="opacity:0.7" onmouseover="hovern(evt)" onmouseout="hovern(evt)" onclick="schliessen(evt)"/>
  <use id="TI01" x="180" y="183" xlink:href="#smTooltipp" transform="scale(1)" style="visibility:hidden" onclick="schliessenTT(evt)"/>
</g>

Außerdem müssen am Ende natürlich noch der Button und der Tooltip definiert werden. Dazu ist es wichtig, die Reihenfolge einzuhalten, damit der Tooltip auch über dem Button eingeblendet wird, wenn er sichtbar ist. In den beiden dazu verwendeten <use>-Tags werden auch die Skripte aufgerufen. Die Funktion hovern sorgt dafür, dass der Tooltip angezeigt wird, wenn man mit der Maus über den Button fährt. Die Funktionen schliessen und schliessenTT werden ausgeführt, wenn Button bzw. Tooltip angeklickt werden. Damit ist im Prinzip auch schon ein Kasten definiert, der natürlich noch nicht ganz funktioniert, weil die Skripte noch fehlen.

Die Definition der halbrunden Elemente für die horizontale Navigationsleiste ist nicht ganz so aufwändig. Lediglich um die Definition des Kreises und des Textes kommen Sie nicht herum. Dafür braucht aber nur am Ende der horizontalen Navigationsleiste ein Button definiert zu werden.

Hinweis:
Da in der horizontalen Navigationsleiste auch nur eine begrenzte Anzahl von Einträgen Platz haben, werden die einzelnen Gruppen entsprechend ihrem Inhalt als Kontakt, Impressum, Ziel und Projekte benannt. Das erleichtert das Verständnis des Codes etwas.

Wichtig ist hier die Position der Gruppen. Sie müssen vor der Definition der horizontalen Navigationsleiste definiert werden, damit sie hinter der Leiste und nicht davor angezeigt werden. Im Beispiel werden die Gruppen daher unmittelbar nach dem <defs>-Abschnitt definiert. Außerdem müssen Sie die Gruppen bereits jetzt exakt positionieren, da der Code die Gruppen nur einblendet, indem die Eigenschaft opacity des style-Attributs verändert wird.

...
</defs>
  <g id="Kontakt" transform="translate(220,0)" style="visibility:visible;opacity:0.1">
    <use x="0" y="=" xlink:href="#smKastenHor" transform="scale(1,1)" style="visibility:inherit;"/>
    <text x="15" y="135" class="info">Wenn Sie mit mir Kontakt aufneh-</text>
    <text x="25" y="150" class="info">men möchten, können Sie mir </text>
    <text x="35" y="165" class="info">eine <a class="weiss" xlink:href="mailto:helma-spona.de">Mail</a> schicken o. meine </text>
    <text x="50" y="180" class="info"><a class="weiss" xlink:href="http://www.helma-spona.de">Webseite</a> besuchen.</text>
  </g>
...

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de