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.

Funktionen[Bearbeiten]

Verschieben mit translate[Bearbeiten]

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.

Drehen mit rotate[Bearbeiten]

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).

Strecken mit scale[Bearbeiten]

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.

Spiegelung mit scale[Bearbeiten]

  • 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.

Verzerren mit skew[Bearbeiten]

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 gegen den Uhrzeigersinn

90 ist keine gültige Angabe für beides Skew-Funktionen, da tan(90) nicht definiert ist.


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>

matrix[Bearbeiten]

Die transform="matrix()"-Methode kombiniert die verschiedenen Transformationen in einer affinen Abbildung. Dazu sind sechs Parameter nötig:

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

Dies entspricht der folgenden affinen Abbildung g, die den ursprünglichen Punkt mit den Koordinaten x und y wie folgt abbildet:
Affine Abbildung.png
Man beachte die ungewöhnliche Position von b und c in der Abbildungsmatrix.

Beispiele:

  • transform="matrix(1,0,0,1,0,0)" ist die Identität. Diese Angabe hat also überhaupt keinen Effekt.
  • transform="matrix(1,0,0,1,x,y)" entspricht transform="translate(x,y)".
  • transform="matrix(x,0,0,y,0,0)" entspricht transform="scale(x,y)".
  • transform="matrix(1,0,tan(α),1,0,0)" entspricht transform="skewX(α)".
  • transform="matrix(1,tan(α),0,1,0,0)" entspricht transform="skewY(α)".
  • transform="matrix(cos(α),sin(α),-sin(α),cos(α),0,0)" entspricht transform="rotate(α)". Eigentlich entspricht diese Drehmatrix der Drehung gegen den Uhrzeigersinn während rotate im Uhrzeigersinn dreht, sodass der Parameter der trigonometrischen Funktionen -α statt α sein müsste. Jedoch ist in SVG die y-Achse falschherum, wodurch sich dies gegenseitig aufhebt.
  • transform="matrix(cos(α),sin(α),-sin(α),cos(α),x,y) matrix(1,0,0,1,-x,-y)" entspricht transform="rotate(α,x,y)".

Anwendungsbeispiele[Bearbeiten]

Tangram[Bearbeiten]

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.

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]