Text für das Seitenbanner einfügen

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

Um den Text für das Seitenbanner zu erstellen, benötigen Sie zwei Texte, die Sie mit dem <text>-Tag erstellen können. Da Sie auf der obersten Ebene der Grafik liegen sollen, ist zu empfehlen, dass Sie sie an das Ende der Grafik vor dem </svg>-Tag anfügen. Das erste Textelement enthält den Text "SVG", das zweite den Text "Scalable Vector Graphic". Der Quellcode für diese beiden Elemente und deren Formatierung sieht wie folgt aus:

<text id="ueberschrift" x="536" y="90" style="font-family:Arial Black;font-size:100;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255);">SVG</text>
<text id="unterschrift" x="244" y="90" style="font-family:Arial Black;font-size:39;stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.5;fill:rgb(0,0,0);">Scalable Vector Graphic</text>

Für die Formatierung des Textes werden verschiedene Angaben verwendet, die in folgender Tabellen näher erläutert werden.

Tabelle: Wichtige Formatangaben für das text-Tag.

Formatierung Beschreibung
font-family Legt die Schriftart fest, die für die Anzeige des Textes verwendet wird. Diese Einstellung wird jedoch auf dem Rechner des Betrachters nur dann korrekt ausgeführt, wenn dort auch die entsprechende Schrift installiert ist. Sie können aber wie bei Stylesheets in HTML auch alternative Schriften angeben. Diese führen Sie einfach nacheinander auf und trennen sie durch Kommata. In diesem Fall sollten Sie aber Schriftnamen, die Leerzeichen enthalten, in Hochkommata einfassen. Die alternative Schrift Helvetica können Sie bspw. mit style="font-family:'Arial Black',Helvetica" definieren.
font-size Damit legen Sie die Schriftgröße in Pixeln fest.
stroke-width Legt die Stärke der Umrandung fest.
stroke Legt die Farbe der Umrandung fest.
fill-opacity Bestimmt die Deckkraft der Füllung. Möglich sind Werte von 0 bis 1, wobei 0 für 0% also vollständige Tranparenz steht und 1 für 100%, also ohne Transparenz. Im Beispiel wird also für den Untertitel 50% Transparenz definiert.
fill Legt die Füllfarbe für die Schrift fest.

Hinweis:
Überall, wo Farben angegeben werden können, haben Sie die Wahl zwischen der Angabe des Farbnamens oder des RGB-Wertes. Bspw. würden fill:red oder fill:rgb(255,0,0) das Element rot füllen. Weitere Informationen zum Verwenden von Farben, Farbverläufen und Füllmustern finden Sie unter Filter, Transformationen und Farbverläufe beschrieben.

Das Ergebnis dieser Ergänzungen stellt sich im Internet Explorer folgendermaßen dar:

Ergebnis der ersten Textelemente für das Seitenbanner

Abbildung: Ergebnis der ersten Textelemente für das Seitenbanner.

   

<< 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