Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

SVG/Elemente/Gruppierungen

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

Im allgemeinen bestehen SVG-Grafiken aus Objekten, die aus mehreren Grundformen, Pfaden oder Text bestehen. Diese Objekte können Sie mit dem g (group)- oder symbol-Element gruppieren.

Während das g-Element sowohl in Definitionsabschnitten als auch im normalen Markup verwendet werden kann, dient das symbol-Element nur zum Festlegen von Objekten im Definitionsabschnitt, die erst gerendert werden, wenn sie dann mit einem use-Element aufgerufen werden.

Gruppierungen mit g[Bearbeiten]

Mit dem g-Element (group) können Sie mehrere Objekte zu einer Gruppe zusammenfassen. Deren Eigenschaften können Sie dann zentral festlegen.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Folgende Angaben sind möglich:

zentrale Stilangaben für Kind-Elemente[Bearbeiten]

Beispiel ansehen …
#schild {
  fill: url(#verlauf1);
  stroke:black;
  stroke-width: 1px;
}

#schild text {
  font-size: 45px;
}
#schild rect {
  fill: none;
}
<g id="schild">
   <rect x="20" y="5"  width="180" height="80" rx="10" ry="10"/>
   <text x="105" y="65" >Text</text>
   <path id="stern"
         d="M82,75 C83,76 66,61 63,61 60,61 44,78 42,77 40,75 50,54 49,51 48,49 26,39 27,36 
	   c0,-2 24,0 26,-1 2,-1 4,-24 7,-25 2,0 7,22 9,24 2,1 25,-3 26,0 0,2 -19,14 -20,16 
           0,2 10,23 8,24z"
   />
<g>
Das Beispiel demonstriert die Funktionsweise des g-Elements. Es werden drei Formen (ein Rechteck, ein Stern und ein Text) gruppiert. Die Stilangaben für Füllung, Randfarbe und -dicke werden zentral im g-Element festgelegt und an die Kindelemente vererbt. Der Hintergrund des Rechtecks wird mit #schild rect {fill: none;} transparent dargestellt.

Manko: fehlende X- und Y-Attribute[Bearbeiten]

Leider kann man das g-Element nicht verschieben, da es keine x- und y-Attribute akzeptiert. Einen Ausweg bietet die Verschachtelung in einem SVG-Element, das Sie beliebig positionieren können.

Beispiel ansehen …
<svg viewBox="0 0 600 400" >
  <defs>
    <!--- Verlauf --->
  </defs>

  <svg x="200" y="100">
    <g id="schild">
      <rect x="20" y="5"  width="180" height="80" rx="10" ry="10"/>
      <text x="105" y="65" >Text</text>
      <path id="stern"
             d="M82,75 C83,76 66,61 63,61 60,61 44,78 42,77 40,75 50,54 49,51 48,49 26,39 27,36 
	        c0,-2 24,0 26,-1 2,-1 4,-24 7,-25 2,0 7,22 9,24 2,1 25,-3 26,0 0,2 -19,14 -20,16 
                0,2 10,23 8,24z"
      />
    <g> 
  </svg>
</svg>
Das g-Element wird innerhalb eines svg-Elements verschachtelt und erbt dessen Position.

Transformationen[Bearbeiten]

Eine weitere Möglichkeit eine Gruppierung zu verschieben, bietet das transform-Attribut mit der translate-Funktion.

  • transform="translate(x,y)"

Darüber hinaus können Sie auch die anderen Funktionen wie Rotieren, Skalieren oder Verzerren verwenden und mit SMIL oder JavaScript animieren.


Beispiel ansehen …
    <g id="schild" transform="translate(200,30) rotate(45 45 45) ">
      <rect x="20" y="5"  width="180" height="80" rx="10" ry="10"/>
      <text x="105" y="65" >Text</text>
      <path id="stern"
             d="M82,75 C83,76 66,61 63,61 60,61 44,78 42,77 40,75 50,54 49,51 48,49 26,39 27,36 
	        c0,-2 24,0 26,-1 2,-1 4,-24 7,-25 2,0 7,22 9,24 2,1 25,-3 26,0 0,2 -19,14 -20,16
                0,2 10,23 8,24z"
      />
    <g>
Die gesamte Gruppe wird mit ihren Kindelementen zuerst nach rechts verschoben und dann um 45 Grad gedreht.

Sie können eine mit dem g-Element zusammengefasste Gruppe von Objekten mehrfach verwenden, wenn Sie sie mit dem use-Element aufrufen.

symbol[Bearbeiten]

Mit dem symbol-Element können Sie Objekte gruppieren und mit einer ID eindeutig identifizieren. Diese Objekte werden wie Objekte im Definitionsabschnitt nicht gerendert, können mithilfe des use-Elements aber beliebig oft aufgerufen werden.

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Empfehlung: Verwenden Sie das symbol-Element anstelle von g, wenn Sie Objektgruppen wiederverwenden wollen.

Dies bringt viele Vorteile mit sich:

  • Anders als das g-Element kann man beim symbol-Element folgende Attribute setzen:
So können Sie beliebige Grafiken passend skaliert einbinden.
  • Der Code wird übersichtlicher
  • die Wiederverwendbarkeit führt bei häufiger Verwendung zu geringeren Datei-Größen
  • durch die Verwendung von Metadaten wie title und desc wird der Code zugänglicher.
Beachten Sie: Innerhalb von symbol sind nur Grundformen, Pfade oder Text, aber keine use-Elemente erlaubt.
Beispiel ansehen …
<defs>
  <symbol id="ei">
    <path d="M1,90 a 60,60 0 0 0 120,0 a 60,90 0 1 0 -120,0" stroke="black" stroke-width="1"/>
  </symbol>

  <symbol id="tulpe" stroke="black" stroke-width="1">
    <path d="M40,60 c0,0 -5,-20 12,-30 c10,10 15,20 15,75 h-30" />
    <path d="M55,80 c5,-20 20,-50 33,-50 c30,140 -93,110 -73,8 c20,0 55,55 47,86 " />
  </symbol>
  <symbol id="stengel" stroke="black" stroke-width="1" fill="url(#gruen)">
    <path d="M55,125 c10,10 16,60 15,80 h8 c0,-10 0,-60 -12,-80" />
    <path d="M50,265 c0,-30 6,-60 60,-110 c-40,50 6,90 -60,110 c-40,-50 26,-90 -45,-150 c70,30 50,100 
             55,100" />
  </symbol>
	  
  <radialGradient id="rot" cx="88%" cy="45%">
    <stop offset="0%" stop-color="silver" />
    <stop offset="100%" stop-color="#c32e04" />
  </radialGradient>
  <radialGradient id="gruen" cx="88%" cy="45%">
    <stop offset="0%" stop-color="silver" />
    <stop offset="100%" stop-color="#5a9900" />
  </radialGradient>
  <radialGradient id="gelb" cx="88%" cy="45%">
    <stop offset="0%" stop-color="silver" />
    <stop offset="100%" stop-color="#dfac20" />
  </radialGradient>
  <radialGradient id="blau" cx="88%" cy="45%">
    <stop offset="0%" stop-color="silver" />
    <stop offset="100%" stop-color="#3983ab" />
  </radialGradient>
  <linearGradient id="hintergrund" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="white" />
    <stop offset="10%" stop-color="#e6f2f7" />
    <stop offset="50%" stop-color="#5c82d9" />
    <stop offset="50%" stop-color="#8db243 " />
    <stop offset="100%" stop-color="#ebf5d7" />
  </linearGradient>	   
</defs>
	
<rect x="0" y="0" width="880" height="500" fill="url(#hintergrund)" />

<g fill="url(#gelb)" transform="translate(0,0)">
   <use xlink:href="#tulpe" />
   <use xlink:href="#stengel" />
</g>

<g fill="url(#rot)" transform="translate(200,0) scale(-1,1)" >
  <use xlink:href="#tulpe" />
  <use xlink:href="#stengel" />
</g>
	 
<g fill="url(#blau)" transform="translate(620,30) rotate(-20)">
  <use xlink:href="#tulpe" />
  <use xlink:href="#stengel" />
</g>
<g fill="url(#gelb)" transform="translate(850,10) scale(-1,1)" >
  <use xlink:href="#tulpe" />
  <use xlink:href="#stengel" />
</g>
   
<use fill="url(#rot)" xlink:href="#ei" transform="translate(70,220) rotate(-10,50,30) scale(.5,.5)" />
<use fill="url(#gelb)" xlink:href="#ei" transform="translate(30,250) scale(.5,.5)" />
<use fill="url(#blau)" xlink:href="#ei" transform="translate(100,250) rotate(30,50,50) scale(.5,.5)" />
	
<g transform="translate(600,360) scale(.5,.5)">
  <use fill="url(#gelb)" xlink:href="#ei" transform="translate(0,0)" />
  <use fill="url(#blau)" xlink:href="#ei" transform="translate(100,50) rotate(30,50,50)" />
  <use fill="url(#rot)" xlink:href="#ei" transform="translate(-100,50) rotate(-30,50,30)" />	
  <use fill="url(#gruen)" xlink:href="#ei" transform="translate(0,100) rotate(-10)" />
</g>
Im Definitionsabschnitt werden mehrere symbol-Elemente definiert:
  • ein ovales Ei
  • eine Tulpenblüte ohne fill-Attribut
  • Stengel und Blätter mit grüner Füllung


Anschließend werden diese Objekte mit use aufgerufen. Tulpe und Stengel sind in einem g-Element, das durch das transform-Attribut an die richtige Stelle verschoben wurde.

Die mit use aufgerufenen Objekte erhalten eine jeweils andere Füllfarbe und werden bei Bedarf noch einmal transformiert.

Aufrufen mit use[Bearbeiten]

Mit dem use Element können Sie ein vorher festgelegtes Objekt (Grundformen, Texte, g, use oder symbol-Elemente) über die ID beliebig oft aufrufen. So sparen Sie Speicherplatz und halten Ihre SVG-Grafiken übersichtlich.

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • x: neue X-Position des Objekts
  • y: neue Y-Position des Objekts
  • width: Breite des Anzeigeraums
  • height: Höhe des Anzeigeraums
  • alle Präsentationsattribute
Beachten Sie: Die x- und y-Koordinaten des use-Elements werden zu den schon vorhandenen des aufgerufenen Elements dazu addiert.
Beispiel ansehen …
  <defs>
    <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%">
	  <desc>Indiana Jones</desc>
      <stop offset="30%" stop-color="#f05a20" />
      <stop offset="45%" stop-color="orange" />
      <stop offset="65%" stop-color="yellow" />
      <stop offset="90%" stop-color="#fefcdf" />
    </linearGradient>
	
    <g id="schild">
      <rect id="rechteck" x="20" y="5"  width="180" height="80" rx="10" ry="10"/>
      <text id="text" x="105" y="65" >Text</text>
      <path id="stern"
            d="M82,75 C83,76 66,61 63,61 60,61 44,78 42,77 40,75 50,54 49,51 48,49 26,39 27,36 
	       c0,-2 24,0 26,-1 2,-1 4,-24 7,-25 2,0 7,22 9,24 2,1 25,-3 26,0 0,2 -19,14 -20,16 
               0,2 10,23 8,24z"
      />
    <g> 

  </defs>

  <line id="linie" x1="0" x2="120" y1="100" y2="100" stroke="#3983ab" stroke-width="5px" />

  <use xlink:href="#schild" x="200" />
  <use xlink:href="#stern" x="20" y="100"/>
  <use xlink:href="#stern" x="80" y="80"/>
  <use xlink:href="#stern" x="-40" y="120"/>
  <use xlink:href="#text" x="120" y="100"/>
  
  <use xlink:href="#linie" x="0" y="0" transform="translate(0,130) rotate(-22) "/>
Sowohl das g-Element zusammen mit seinen Kindelementen als auch die einzelnen Elemente werden über ihre id beliebig oft aufgerufen. Wie Sie an den blauen Linien sehen, können durch das use-Element aufgerufene Objekte auch schon gerenderte Objekte sein und müssen sich nicht im Definitionsabschnitt befinden.

Anwendungsbeispiele[Bearbeiten]

Eine Burg[Bearbeiten]

Auf einigen Seiten ist eine Burg eingebunden. Hier können Sie sie noch einmal als Beispiel sehen:

Beispiel ansehen …
 <defs>
    <style type="text/css">
      <![CDATA[
#turm {
  stroke: black;
  stroke-width: 1px;
  fill:url(#mauerwerk);
}

#mauerwerk,#holz,#banner {
  stroke: black;
  stroke-width: 1px;
}

#mauer {
  fill:url(#mauerwerk);
}]]></style> 

    <pattern id="mauerwerk" x="0" y="0" width="48" height="19" patternUnits="userSpaceOnUse">
      <rect width="48" height="20" fill="#FFF8DC" stroke-width="0"/>
      <path d="M0,1 h48"/>
      <path d="M0,10 h48"/>
      <path d="M12,1 v9"/>
      <path d="M36,1 v9"/>
      <path d="M1,10 v9"/>
      <path d="M25,10 v9"/>
    </pattern>

    <pattern id="holz" x="0" y="0" width="5" height="17" patternUnits="userSpaceOnUse">
      <rect width="5" height="20" fill="#9c4822" stroke-width="0"/>
      <path d="M0,0 v20"/>
    </pattern>
	
    <linearGradient id="hintergrund" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="white" />
      <stop offset="10%" stop-color="#e6f2f7" />
      <stop offset="100%" stop-color="#5c82d9" />
    </linearGradient>	 
	
    <radialGradient id="gelb" cx="50%" cy="50%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="#dfac20" />
    </radialGradient>
	
	
    <symbol id="turm">
      <desc>Turm der Burg</desc>
      <path d="M1,1 h8 v9 h8 v-9 h8 v9h8 v-9 h8 v15 l-5,5 v50 h-30 v-50 l-5,-5 v-15 z" />
      <rect x="20" y="29" width="5" height="10" fill="black"/>
    </symbol>
    <symbol id="mauer">
      <desc>Definition fuer eine Mauer gefuellt mit Muster "Mauerwerk"</desc>
      <rect id="mauer" x="0" y="0" width="160" height="90" />
    </symbol>
    <symbol id="tor">
      <desc>Definition für das Tor</desc>
      <path d="M0,50 a25,25 0 0,1 50,0 v40 h-50 z"/>
    </symbol>
    <symbol id="banner">
      <desc>Definition für das Banner</desc>
      <path d="M10,7 v28"/>
      <path d="M10,10 c20,-5 -5,5 15,5 c15,0 -5,5 15,5 h5 l-3,3 l3,3 c10,3 -15,-5 -20,-5 c5,-3 
               -10,0 -15,-5 z"/>
    </symbol>
  </defs>

  <g> 
    <rect width="160" height="200" fill="url(#hintergrund)"/>
    <use xlink:href="#turm" x="10" y="56" />
	<use xlink:href="#banner" x="55" y="6" fill="#c32e04"/>
	<use xlink:href="#turm" x="110" y="56" />
	<use xlink:href="#banner" x="5" y="22" fill="#3983ab"/>
	<use xlink:href="#turm" x="60" y="40" />
	<use xlink:href="#banner" x="105" y="22" fill="purple"/>
	<use xlink:href="#mauer" x="0" y="110" />
	<use xlink:href="#tor" x="55" y="120" fill="url(#holz)"/>
	<circle r="15" fill="url(#gelb)"/>
  </g>
Die Burg besteht aus nur wenigen symbol-Elementen wie z.B. der Turm oder das Banner, die dann mit use mehrfach aufgerufen werden. Das Mauerwerk und die Holz-Optik des Tores wurde mit Hilfe eines pattern-Musters gestaltet, das dann im fill-Attribut aufgerufen wird.
Der Himmel und die Sonne wurden mit Farbverläufen gefüllt.

Tangram[Bearbeiten]

Beispiel ansehen …
<svg>
 <defs>
    <title>Vorlagen für Tangram-Figuren</title>
    <symbol id="dreieck_gr">
      <desc>das große Dreieck</desc>
      <path d="m0,0 132,132 132-132z"/>
    </symbol>
	<symbol id="dreieck_m">
      <desc>das mittlere Dreieck</desc>
      <path d="m0,0 h132 v132 z"/>
    </symbol>
	<symbol id="dreieck_kl">
      <desc>das kleine Dreieck</desc>
      <path d="m0,66 l66,66v-132z"/>
    </symbol>
	<symbol id="quad">
      <desc>das quadratische Rechteck</desc>
      <path d="m0,0 v94 h94 v-94z"/>
    </symbol>
	<symbol id="para">
      <desc>das Paralellogramm</desc>
      <path d="m66,0 l-67,67 v132 l67-67 z"/>
    </symbol>
	
    <symbol id="viereck">
      <text x="10" y="280">Quadrat</text>
      <use xlink:href="#dreieck_gr" class="eins"/>
      <use xlink:href="#dreieck_gr" class="zwei" transform="scale(-1 1) rotate(90)"/>
      <use xlink:href="#dreieck_m" class="drei" transform="translate(264,132) rotate(90)"/>
      <use xlink:href="#dreieck_kl" class="vier" x="132" y="66"/>  
      <use xlink:href="#quad" class="sechs" transform="translate(132,132) rotate(45)"/>
      <use xlink:href="#para" class="sieben" x="198" y="0"/>      
      <use xlink:href="#dreieck_kl" class="fuenf" transform="translate(132,197) rotate(90)"/>
    </symbol> 
	 
    <symbol id="schiff">  
      <text x="40" y="250">Schiff</text>
      <use xlink:href="#dreieck_gr" class="eins" transform="translate(140,0) rotate(90)"/>
      <use xlink:href="#dreieck_gr" class="zwei" transform="translate(290,0)  rotate(90)"/>
      <use xlink:href="#dreieck_m" class="drei" transform="translate(400,80) scale(-1 1) rotate(45)"/>
      <use xlink:href="#dreieck_kl" class="vier" transform="translate(281,218) rotate(45)"/> 
      <use xlink:href="#para" class="sieben" transform="translate(374,218) rotate(45) "/> 
      <use xlink:href="#dreieck_kl" class="fuenf" transform="translate(187,311) rotate(135)"/>
      <use xlink:href="#quad" class="sechs" transform="translate(140,264)"/>
    </symbol>
  </defs>

   <use xlink:href="#viereck" x="10" y="10"/>  
   <use xlink:href="#schiff" x="400" y="10"/>  

</svg>
Tangram ist ein chinesisches Legespiel, in dem ein Quadrat in 7 geometrische Formen zerschnitten wird, die dann beliebig zu neuen Bildern gedreht, gespiegelt und verschoben werden.
Da es beim Rotieren, Spiegeln und Verschieben zu Rundungsfehlern kommen kann, wurde den Figuren ein 1px breiter weißer Rand gegeben, der das Gesamtbild besonders im ersten Beispiel gleichmäßiger aussehen lässt.

Weblinks[Bearbeiten]


Referenz[Bearbeiten]