2 5 3 22 0 0 0

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.
1. KindElement des SVG-viewPorts im 2. SVG-Element des SVG Attribut class="svg2" wird ignoriert svg x="0" y="80" width="180" height="80" class="svg3" .svg3{padding: 10px;} SVG-Element mit Attribut class="svg2" width="180" height="80" class="svg3" .svg3{padding: 10px;}
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 ()
N S W O
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. 1. Ausgabe wird nur von Chrome und Opera umgesetzt! Im 3. Beispiel soll dem Rechteck width="70" height="70" die Referenz fill="url(#symbc>)" übertragen werden. Das schlägt fehl und hat nur mit <use xlink:href="#symbc"> Erfolg.
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.
schwarz & weiß

				
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" />
Ein Rechteck und eine Ecke, die dann dreimal gedreht und verschoben wird.
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
linksbündig mittig rechtsbündig
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.
Am Beispiel: 1. <pattern>-Element 50x50 werden vier Rechtecke 25x25 notiert und jeweils um Höhe und Breite versetzt. Das 2. <pattern>-Element 75x75 beinhaltet einen Kreis cx="37.5" cy="12.5" r=10", der alle 75px dies nun wiederholt.
Element <filter> Entsprechend MozillaDeveloperNetwork als Container deklariert
Kindelemente: <fe...> Elemente



Dokument geändert am: 06. Aug. 2016 11:34