Erläuterungen zu wichtigen Attributen

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

Es gibt Attribute, die so gut wie von allen Tags zur Definition von Shapes unterstützt werden. Sie werden auch als Universal-Attribute bezeichnet und sollen nachfolgend erläutert werden.

Positionieren von Elementen mit x und y

Alle Elemente einer SVG-Grafik, dies ich positionieren lassen, verfügen über die Attribute x und y, über die deren absolute oder relative Position innerhalb der Grafik festgelegt werden kann. Das Attribut x bestimmt dabei die horizontale Position, also den Abstand vom linken Rand und y den Abstand vom oberen Rand der Grafik.

Positionierung von SVG-Elementen mit x und y

Abbildung: Positionierung von SVG-Elementen mit x und y.

Auf diese Weise wurde bspw. der Text im letzten Listing positioniert. Hier befindet sich die Grafik 0 Pixel von links, also unmittelbar am linken Rand und 10 Pixel vom oberen Rand.

Hinweis:
Nähere Erläuterungen zur Positionierung und zum Koordinatensystem finden Sie unter Das Koordinatensystem von SVG-Grafiken beschrieben.

Zum Formatieren wird das style-Attribut verwendet

Wenn Sie Shapes formatieren möchten, können Sie dazu das style-Attribut verwenden. Das funktioniert genau wie in HTML auch. Die einzelnen Formatierungen werden nacheinander aufgeführt. Dazu wird die Form:

style="format:wert;format2:wert2;...formatn:wertn"

verwendet. Die Angabe style="font-family:Arial;font-size:16" in einem <text>-Tag würde die Schriftart auf Arial und die Schriftgröße auf 16 Pixel festlegen.

Zeichenketten, die als Wert für eine Formatierung verwendet werden, müssen nicht in Anführungszeichen eingeschlossen werden. Davon gibt es allerdings ein paar Ausnahmen, die noch näher erläutert werden. Wenn Sie Dezimalzahlen als Werte angeben, müssen Sie einen Punkt als Dezimaltrennzeichen verwenden.

Die verfügbaren Formatierungen sind abhängig vom Element, auf das sie angewendet werden. Es gibt aber auch hier einige, die für einen Großteil der Shapes verfügbar sind. Grundsätzlich unterstützt SVG die meisten Formatierungen des CSS 1.0, CSS 2.0 und des zukünftigen CSS 3.0-Standards. Allerdings natürlich nur den Teil davon, der für SVG-Grafiken sinnvoll ist.

Hinweis:
Anstelle des style-Attributs können Sie auch in den Tags selbst sogenannte presentations-Attribute verwenden. Dabei handelt es sich um allgemein gültige Attribute zur Formatierung, die allerdings außerhalb des style-Attributs definiert werden. Sie sind mit der letzten Änderungen der W3C-Dokumentation eingeführt worden und werden daher vom SVG-Viewer nur in Teilen unterstützt und daher nachfolgend nicht verwendet. Wenn Sie sie nutzen möchten, geben Sie dazu einfach die CSS-Eigenschaft als Attribut an. Die Angabe von <text ... fill="red" stroke="none">test</text> wäre somit gleichwertig zu <text ... style="fill:red;stroke:none">test</text>.

Die Größe legen Sie mit width und heigth fest

Wenn Sie die Größe von Elementen bestimmen möchten, können Sie dazu die Attribute width und height verwendeten. width bestimmt die Breite und height die Höhe des Elements in der angegebenen Einheit. Geben Sie keine Einheit an, wird Pixel verwendet. Für den Tag <text> stehen diese beiden Attribute nicht zur Verfügung.

Benennen lassen sich Elemente über das id-Attribut

Wenn Sie über JavaScript oder eine andere Programmiersprache auf die Elemente der Grafik zugreifen möchten, sollten Sie diese benennen. Dazu steht Ihnen wie in HTML das Attribut id zur Verfügung. Darüber können Sie dem Element einen Namen geben, der jedoch innerhalb der Grafik eindeutig sein muss. Außerdem sollte dieser Name nicht identisch mit einem Attribut oder Tagnamen sein und keine Sonderzeichen oder Leerzeichen enthalten.

Mit dem Code

<text id="TEXT01" x="0" y="14" style="font-family:Arial;font-size:16">SVG - das ultimative Grafikformat</text>

können Sie bspw. das Textelement mit "TEXT01" benennen.

   

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