SVG/Anwendung und Praxis/SVG mit CSS transformieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Für Transformationen gibt es in SVG das transform-Attribut und seine Verwandten gradientTransform bei Verläufen und patternTransform bei Mustern. In CSS gibt es die gleichnamige transform-Eigenschaft, die sich in den allen modernen Browsern außer Microsoft Edge auch auf SVG-Elemente anwenden lässt[1].

Trotz ihrer Ähnlichkeit gibt es gravierende Unterschiede in den Koordinatensystemen, auf denen die Transformationen basieren. Während jedes HTML-Element sein internes Koordinatensystem hat, dassen Ursprung bei (50%, 50%) liegt, beziehen sich SVG-Elemente immer auf das Koordinatensystem des svg-Elements, das seinen Ursprung in der linken oberen Ecke bei (0,0) hat.

Deshalb erzielen Transformationen von SVG-Elementen ganz andere Ergebnisse als Transformationen mit CSS.

Beispiel ansehen …
@keyframes rotation {
  0% { transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}  

@keyframes rotation2 {
  0% {transform: translate(200px,100px) rotate(0deg);}
  100% {transform: translate(200px,100px) rotate(360deg);}
}
  <rect id="eins" x="100" y="100" width="50" height="50"/> 
  <rect id="zwei" x="0" y="0" width="50" height="50" /> 
  <rect id="drei" x="-25" y="-25" width="50" height="50"/>
Das rote und das gelbe Rechteck drehen sich um 360 Grad, nehmen als Mittelpunkt der Drehung aber den Ursprung des SVG-Koordinatensystems.
Das blaue Quadrat hat seinen Mittelpunkt durch die X- und y-Koordinaten im Ursprung des Koordinatensystems. Deshalb dreht es sich um sich selbst und wird dann erst mit translate(200,100) passend verschoben.
Empfehlung: Verzichten Sie auf eine Angabe von x- und y-Koordinaten und positionieren Sie SVG-Elemente erst nach der gewünschten Transformation mit translate(x,y).


Ana Tudor hat einen sehr ausführlichen Artikel auf CSS-Tricks veröffentlicht, in dem die systembedingten Unterschiede und auch die abweichenden Browser-Verhalten vorgestellt werden.[2] In fernerer Zukunft sollen die beiden Spezifikationen zu einer einheitlichen verschmelzen, so wie es bei Masken und Beschneidungen schon erfolgt ist.

Quellen[Bearbeiten]

  1. css-tricks: Transforms on SVG Elements von Ana Tudor 05.05.2015
  2. css-tricks: Transforms on SVG Elements

Weblinks[Bearbeiten]