Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 7   

7.1 Elemente gruppieren - das g-Element

In SVG können Elemente gruppiert werden, d.h. Sie können Elemente mit Hilfe des g-Elements zu einer Gruppe zusammenschließen.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="150px" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das g-Element</title>
  <desc>Gruppierungen festlegen</desc>
  <rect x="10" y="20" width="120" height="110" />

  <g stroke="red">
    <rect x="140" y="20" width="120" height="110"
      rx="10" ry="5"
      fill="none" stroke-width="1.5" />
    <rect x="270" y="20" width="120" height="110"
      style="fill:#efefef;" />
  </g>
</svg>
      

Das obige Beispiel zeigt 3 Rechtecke. Die hinteren beiden Rechtecke sind mit Hilfe des g-Elements gruppiert, d.h. sie bilden jetzt eine Einheit oder Gruppe.

Für die Elemente dieser Gruppe können die verschiedensten Eigenschaften auch gemeinsam festgelegt werden.
Dazu werden dem g-Element die entsprechenden Attribute oder Eigenschaften zugeordnet. Im Beispiel wurde dem g-Element das Attribut stroke mit dem Wert red zugeordnet, so dass die letzten beiden Rechtecke nun mit einer roten Linienfarbe dargestellt werden.

Gruppierungen sind ebenfalls sehr hilfreich für die Transformation von mehreren Elementen. So können Sie gruppierte Elemente, gemeinsam verschieben, skalieren, rotieren oder anderweitig transformieren.

Weiterhin kann eine, mit dem Element g festgelegte, Gruppe von Elementen auch animiert werden.

Ein g-Element kann weitere g-Elemente enthalten, so dass es möglich ist eine komplexe Zeichnung in Gruppen zu strukturieren. Im folgenden ein einfaches Beispiel für die Verwendung von benannten Gruppen.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="600" height="300" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das g-Element</title>
  <desc>Grundformen zu einem auto gruppiert</desc>

  <!-- Definition der Gruppe Auto -->
  <g id="auto">
    <rect x="55" y="180" width="195" height="45"
      ry="15" fill="red" />
    <rect x="55" y="200" width="195"      height="45"
      fill="red" />
    <rect x="100" y="132" width="100"      height="60"
      ry="15" fill="red" />
    <!-- Radkästen und Reifen -->
    <circle cx="85" cy="250" r="21"
      fill="white" />
    <circle cx="205" cy="250" r="21"
      fill="white" />
    <g id="rad_hinten">
      <circle cx="85" cy="250" r="18"
        fill="black" />
      <circle cx="85" cy="250" r="8"
        fill="grey" />
      <circle cx="75" cy="250" r="2"
        fill="red" />
    </g>
    <g id="rad_vorn">
      <circle cx="205" cy="250" r="18"
        fill="black" />
      <circle cx="205" cy="250" r="8"
        fill="grey" />
      <circle cx="195" cy="250" r="2"
        fill="red" />
    </g>
    <!-- Stoßstange Türen Scheiben -->
    <rect x="51" y="235" width="15"
      height="12" ry="15" fill="grey" />
    <rect x="222" y="235" width="32"
      height="12" ry="15" fill="grey" />
    <polygon fill="red" points="65 181, 106 135, 102 181" />
    <line x1="68" y1="180" x2="200" y2="180"
      style="stroke:grey; stroke-width:2px;" />
    <line x1="145" y1="132" x2="145" y2="245"
      style="stroke:grey; stroke-width:2px;" />
    <rect x="102" y="185" width="15"
      height="12" ry="15" fill="grey" />
    <line x1="103" y1="191" x2="116" y2="191"
      style="stroke:black; stroke-width:4px;" />
    <rect x="150" y="185" width="15"
      height="12" ry="15" fill="grey" />
    <line x1="151" y1="191" x2="164" y2="191"
      style="stroke:black; stroke-width:4px;" />
    <rect x="108" y="139" width="30"
      height="35" ry="8" fill="grey" />
    <rect x="152" y="139" width="39"
      height="35" ry="8" fill="grey" />
    <!-- Beleuchtung -->
    <rect x="54" y="185" width="10" height="20"
      ry="20" fill="firebrick" />
    <rect x="54" y="200" width="10" height="5"
      ry="2" fill="darkorange" />
    <rect x="243" y="210" width="10" height="5"
      ry="2" fill="darkorange" />
    <circle cx="248" cy="200" r="8"
      fill="gold" />
    <rect x="240" y="192" width="10" height="17"
      fill="red" />
  </g>

  <!-- die Strasse -->
  <line x1="0" y1="268" x2="600" y2="268" stroke="black" />

  <!-- hier beginnt die Animation -->
  <animateTransform xlink:href="#rad_hinten"
    type="rotate" attributeName="transform"
    begin="0s" dur="2s"
    from="0 85 250" to="360 85 250"
    repeatCount="7" />
  <animateTransform xlink:href="#rad_vorn"
    type="rotate" attributeName="transform"
    begin="0s" dur="2s"
    from="0 205 250" to="360 205 250"
    repeatCount="7" />
  <animateTransform xlink:href="#auto"
    type="translate" attributeName="transform"
    begin="0s" dur="10s"
    from="-250" to="600" />
  <animateTransform xlink:href="#auto"
    type="translate" attributeName="transform"
    begin="10s" dur="4s"
    from="-250" to="50"
    fill="freeze" />
</svg>
      

Im obigen Beispiel werden verschiedenen Grundformen, die gemeinsam ein Auto darstellen, mit dem g-Element zu einer Gruppe zusammengeschlossen.
Innerhalb dieser Gruppe, die durch das Attribut id eindeutig in auto benannt ist, sind zwei weitere Gruppen definiert, deren Elemente jeweils einen Reifen darstellen und ebenfalls durch id eindeutig in rad_hinten und rad_vorn benannt sind.

Das Attribut id gehört zu den allgemeinen Attributen und kann jedem Element einer SVG-Grafik zugeordnet werden, um dieses eindeutig zu identifizieren. Es ist also möglich beliebigen Elementen oder Objekten einen einmaligen Namen zu geben.
Dabei ist zu beachten, das vergebene Werte für das Attribut id im Dokument auch wirklich einmalig sind, d.h. keine Zeichenfolge darf mehr als einmal als Wert für id verwendet werden.

Eindeutig benannte Elemente können von anderen Elementen (z.B. Elemente zur Animation) referenziert werden.

In der obigen Grafik wird jeder Reifen und das gesamte Auto unabhängig voneinander animiert: die Reifen rotieren und das Auto wird verschoben.
Die Animation soll hier lediglich als ein Beispiel zur Verwendung von eindeutig benannten Gruppen dienen - weitergehende Informationen zu bewegten Grafiken finden Sie im Kapitel Animationen.




index  |  Kapitel 7  <<  | 7.1 |  >>  7.2   Das defs-Element und das use-Element