SVG/Transformationen

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

Mit dem transform-Attribut können Sie SVG-Formen und Gruppierungen ändern.

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Der Titel dieses Artikels ist mehrdeutig. Die CSS-Eigenschaft transform ist unter CSS/Eigenschaften/äußere Gestaltung/Transformationen aufgeführt.



Folgende Funktionen sind möglich:

Sie können mehrere Transformationen in einer Befehlskette kombinieren, indem Sie sie durch Whitespace-Zeichen oder Kommata voneinander trennen.

Beachten Sie, dass eine unterschiedliche Reihenfolge der Transformationen andere Ergebnisse hervorbringen kann.
Die Funktionen werden wie CSS-Eigenschaften von rechts nach links ausgeführt.
Empfehlung: Verzichten Sie auf eine Positionierung mit x und y und legen Sie die endgültige Position des transformierten Elements mit translate fest.

Inhaltsverzeichnis

[Bearbeiten] Funktionen

[Bearbeiten] Verschieben mit translate

Mit der Funktion transform="translate(x,y)" können Sie eine Form oder Gruppierung verschieben.

Folgende Angaben sind nötig:

  • x: X-Wert (in Punkten, ohne px-Angabe)
  • y: Y-Wert (in Punkten, ohne px-Angabe)
Beispiel ansehen …
<svg>
 <defs>
    <symbol id="rechteck">
      <desc>ein Muster-Rechteck</desc>
      <rect x="20" y="20" width="50" height="50"/>
    </symbol>
  </defs>
 
  <use xlink:href="#rechteck" id="eins"/>
  <use xlink:href="#rechteck" id="zwei" transform="translate(50,25)"/>
  <use xlink:href="#rechteck" id="drei" transform="translate(100,100)"/>
</svg>
Mit symbol wird ein Muster-Rechteck definiert, das dann mit use mehrmals aufgerufen wird. Dabei werden das zweite und dritte Rechteck verschoben.

[Bearbeiten] Drehen mit rotate

Mit der Funktion transform="rotate(grad)" können Sie eine Form oder Gruppierung um den Punkt (0,0) drehen.

Folgende Angaben sind nötig:

  • grad: Winkelmaß in Grad, negative Werte drehen das Objekt entgegen dem Uhrzeigersinn

Daneben sind folgende Angaben möglich;

  • x: X-Wert (in Punkten, ohne px-Angabe)
  • y: Y-Wert (in Punkten, ohne px-Angabe)

Diese Koordinaten bestimmen den Mittelpunkt der Drehung. Standardwert ist (0,0) des SVG-Elements; die Koordinaten beziehen sich darauf.


Beispiel ansehen …
<svg viewbox="-300 -300 600 600">
 <defs>
    <symbol id="logo" width="300" height="102" >
      <desc>ein Muster-Rechteck</desc>
      <rect x="2" y="2" width="200" height="98" rx="20" ry="20" />
	  <text id="logot" x="100" y="70" fill="black" text-anchor="middle">Logo</text>
    </symbol>
  </defs>
 
  <use xlink:href="#logo" class="null" transform="rotate(45)"/>
  <use xlink:href="#logo" class="eins" transform="rotate(90)"/>
  <use xlink:href="#logo" class="zwei" transform="rotate(180)"/>
  <use xlink:href="#logo" class="drei" transform="rotate(45,200,200)" />
  <use xlink:href="#logo" class="vier" transform="rotate(90,200,200)" />
</svg>
Um die Drehung sichtbar zu machen wurde die viewBox so verändert, dass auch die negativen Koordinaten zu sehen sind.
Mit symbol wird ein Muster-Rechteck definiert, das dann mit use mehrmals aufgerufen wird.

Bei der Drehung der Rechtecke um den Mittelpunkt (0,0) wird erkennbar, dass das Rechteck sich in den negativen Bereich schiebt.

Das vierte und fünfte Rechteck drehen sich um einen Punkt (200,200).

[Bearbeiten] Strecken mit scale

Mit der Funktion transform="scale(x,y)" können Sie eine Form oder Gruppierung strecken oder spiegeln.

Folgende Angaben sind nötig:

  • x: Angabe einer natürlichen Zahl, Werte unter 1 verkleinern, Werte über 1 vergrößern die Form.
    negative Werte spiegeln die Form

Daneben sind folgende Angaben möglich; wird ein zweiter Wert festgelegt, bezieht sich der erste Wert nur auf die X-Koordinaten.

  • y: Angabe eines optionalen Y-Werts.

[Bearbeiten] Spiegelung mit scale

  • transform="scale(-1,1)" spiegelt entlang der X-Achse
  • transform="scale(1,-1)" spiegelt entlang der Y-Achse
Beispiel ansehen …
<svg>
  <use xlink:href="#logo" id="null" x="10" y="10"/>
 
  <use xlink:href="#logo" id="zwei" x="100" y="100" transform="scale(1.5)"/>
  <use xlink:href="#logo" id="drei" x="100" y="100" transform="scale(.5)"/>
  <use xlink:href="#logo" id="eins" x="10" y="10" transform="scale(-1,1)"/>
  <use xlink:href="#logo" id="vier" x="10" y="10" transform="scale(1,-1)"/>
</svg>
Mit symbol wird ein Muster-Rechteck definiert, das dann mit use mehrmals aufgerufen wird.
Beachten Sie dass neben der Form auch die Koordinaten zum Mittelpunkt skaliert werden. Das zweite und dritte Rechteck wurden um 100,100 verschoben, damit sie sich nicht völlig überdecken. Der Abstand von 100px zum Mittelpunkt wird bei der Verkleinerung des grünen Rechtecks ebenfalls verkleinert, beim roten Rechteck um den Faktor 1.5 vergrößert.
Auch bei einer Spiegelung wird die Position der Formen gespiegelt, so dass sie mit translate erst wieder an die gewünschte Stelle verschoben werden muss.

[Bearbeiten] Verzerren mit skew

Mit der Funktion transform="SkewX(x)" bzw. transform="SkewY(y)" können Sie eine Form oder Gruppierung verzerren.

Folgende Angabe ist nötig:

  • grad: Winkelmaß in Grad, negative Werte verzerren das Objekt entgegen dem Uhrzeigersinn


Beispiel ansehen …
<svg>
 <defs>
    <symbol id="logo" width="150" height="75">
      <desc>ein Muster-Rechteck</desc>
      <rect x="1" y="1" width="148" height="73" rx="0" ry="0"/>
	  <text id="logot" x="75" y="55" fill="black" text-anchor="middle">Logo</text>
    </symbol>
  </defs>
 
  <use xlink:href="#logo" class="null" transform="translate(10 10)"/>
 
  <use xlink:href="#logo" class="eins" transform="translate(200 10) skewX(10)"/>
  <use xlink:href="#logo" class="zwei" transform="translate(400 10)skewX(45)"/>
  <use xlink:href="#logo" class="drei" transform="translate(600 10)skewX(60)"/>
 
  <use xlink:href="#logo" class="null" x="10" y="210"/>
  <use xlink:href="#logo" class="eins" transform="translate(200 210) skewY(10)"/>
  <use xlink:href="#logo" class="zwei" transform="translate(400 210)skewY(45)"/>
  <use xlink:href="#logo" class="drei" transform="translate(600 210)skewY(60)"/>
</svg>

[Bearbeiten] matrix

Die transform="matrix()"-Methode kombiniert die verschiedenen Transformationen in einer Matrix (Anordnung von Zahlenwerten oder anderen mathematischen Objekten in Tabellenform) mit 6 Parametern.

  • transform="matrix(a,b,c,d,e,f)"

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Tangram

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.

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>
Die einzelnen Formen werden als symbol deklariert und dann mit use aufgerufen.
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.

[Bearbeiten] siehe auch

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML