Container des SVG
ContainerElemente (auch struktuierendes Element) können wieder in anderen Containern als Gruppe beschrieben werden. Das kann aus Referenzierungsgründen sowie zur Positionierung angebracht sein.
Der SVG Container | ||
Element <svg> | Attribute | |
class, width, height, x, y, viewBox
Die viewBox bedarf einer umfangreicheren Erläuterung Angaben zu: version und baseProfile verwende ich hier nicht. Browser sind die DarstellungsProgramme und die rendern, was zu rendern ist. Für preserveAspectRatio Auf alle weiteren Attribute gehe ich nicht ein, solange der praktische Wert sich mir nicht erschließt. Die Schachtelung ist ersichtlich. Klasseneigenschaften für eingeschlossene SVG-Elemente lassen sich nicht mehr weiter anwenden. Somit werden Attribute wie padding wirkungslos. |
|
|
ContainerElemente | ||
Element <g> | allgemeines Gruppierungselement Element, das selbst nicht gerendert wird. Es können mehrere Elemente zu einer Einheit gruppiert werden, denen in dieser Gruppe gemeinsame Eigenschaften vererbt werden. Attribute: id, class, Präsentationsattribute, Transformationen Ansicht des Quellcodes (↑) |
|
Element <defs> | Definitionsabschnitt: dient der Ablage von grafischen Elementen, die in allen Form/GrafikElementen wie auch im <use>-Element instanziiert werden und mehrfach im viewPort zur Anwendung kommen können.
|
Bereich, der selbst nicht gerendert wird. Mit ihm können Referenzen erstellt werden, die auf andere grafische Elemente übertragen werden. |
<svg width="200" height="40"> <defs> <linearGradient id="Verlauf_1"> <stop offset="10%" stop-color="DeepSkyBlue" /> <stop offset="90%" stop-color="DeepPink" /> </linearGradient> </defs> <rect x="0" y="0" width="200" height="40" fill="url(#Verlauf_1>)" /> </svg> |
|
|
Element <symbol> | Symbolabschnitt: dient der Ablage von grafischen Elementen, die nur im <use>-Element instanziiert und mehrfach wiederverwendet werden können. Das Element sollte im <defs>-Container untergebracht sein, muss es aber nicht, da es selber nur beschreibende Eigenschaften zusammenfasst wie das 2. Beispiel zeigt. Quellcode des Beispiels (↑) Das <symbol>-Element zum Unterschied zu <defs> lässt sich nur von <use> referenzieren. |
Bereich, der nicht gerendert wird.
|
Element <mask> | Maskierende Objekte arbeiten nach dem Prinzip, je heller/transparenter um so stärker der Effekt. Angewendet hier am Beispiel dient ein weißes Dreieck als Maske. Das Rechteck als auch Text werden einmal ohne Maske und dann mit gerendert.
|
|
Element <use> | Wiederverwendung eindeutiger Elemente oder Elementgruppen
Attribute: x, y, width, height und href (xlink:href="id eines Elementes") Attribute für Strich und Füllung, Transformation Syntax: xlink:href="#Identifikator" Prinzipdarstellung: <defs> <rect id="MyRect" width=“100" height="100"/> </defs> <use x=“10" y="10" xlink:href="#MyRect" /> oder: <defs> <symbol id="MySymbol" > ... </symbol> </defs> <use x=“10" y="10" xlink:href="#MySymbol" /> |
|
Element <text> | Kindelemente: <tspan>, <tref> und <textpath>
Einzeiliger Text, <tref> auf Browsern nicht ausführbar, Beispiel 1: x="160" die Mitte der viewBox <text text-anchor="start">linksbündig</text> <text text-anchor="middle">mittig</text> <text text-anchor="end">rechtsbündig</text>Zu viele Attribute werden garnicht von Browsern unterstützt. Also spar ich mir gleich die Aufzählung. ausführlicher auf: GrafikElemente |
|
Element <pattern> | Entsprechend MozillaDeveloperNetwork als Container deklariert
Kindelemente: Positionierung, Dimensionierung, grafische und FormElemente referenziert über eindeutigen ID-Namen Wiederholung von Elementen. In den <pattern>-Elementen werden Formen abgelegt, die über flächenerzeugende Elemente referenziert werden. Das <use>-Element kann hier nicht zum Rendern herangezogen werden. |
|
Element <filter> | Entsprechend MozillaDeveloperNetwork als Container deklariert
Kindelemente: <fe...> Elemente |