Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

SVG - transformacje

Email Drukuj PDF

Podobnie jak w przypadku CSS3, obiekty utworzone za pomocą techniki SVG można transformować.

Przesunięcie

Przyjmijmy, że tworzymy wyjściowy prostokąt o następującym kodzie:

<svg width="500" height="250" xmlns="http://www.w3.org/2000/svg">
<rect height="100" width="250" y="30" x="80" stroke-width="5" 
stroke="#000000" fill="#7f3f00"/>
</svg>

Aby zmiany były bardziej widoczne, obejmujemy obszar rysowania obramowaniem.

Przesunięcie o 50 pikseli w prawo i 40 pikseli w dół uzyskamy, dopisując w definicji prostokąta następujący fragment kodu:

transform="translate(50,40)"

Przesunięcie o 30 pikseli w lewo i 20 pikseli w górę uzyskamy, dopisując w definicji prostokąta następujący fragment kodu:

transform="translate(-30,-20)"

Obrót

Obrót o 15 stopni w prawo uzyskamy, dopisując w definicji prostokąta następujący fragment kodu:

transform="rotate(15)"

Jednak trzeba też podać współrzędne środka obrotu, inaczej system przyjmie, że jest nim punkt (0,0). Trzeba go zatem wskazać, badając rozmiary i położenie obiektu.

transform="rotate(15,100,50)"

W poniższym przykładzie obiekt o jaśniejszym kolorze khaki został obrócony za pomocą kodu transform="rotate(45,200,150)", gdzie 200,150 wyznacza środek prostokąta i zarazem środek obrotu.

Naturalnie obrót w lewo wymagałby podania wartości ujemnej kąta obrotu, np.:

transform="rotate(-15,100,50)"

Skalowanie

Powiększenie obiektu można wykonać za pomocą kodu podającego współczynnik skalowania obu wymiarów lub też każdego z wymiarów z osobna, np.

transform="scale(2)"
<svg  style="border:solid 1px black" width="500" height="300" 
xmlns="http://www.w3.org/2000/svg"> <circle fill="#7f3f00" stroke-width="3" cx="80" cy="80" r="50" stroke="#000000"/> <circle fill="khaki" stroke-width="3" cx="80" cy="80" r="50"
transform="scale(2)" stroke="#000000"/> </svg>
transform="scale(2,1)"

Użycie liczby mniejszej od 1 powoduje zmniejszenie obiektu.

Pochylenie

Pochylenie obiektu może dotyczyć składowej x lub y obiektu. Może to być np. kod:

transform="skewX(45)"

powoduje pochylenie bocznych krawędzi prostokąta.

transform="skewY(45)"

powoduje pochylenie górnej i dolnej krawędzi prostokąta.

<svg style="border:solid 1px black" width="500" height="500" 
xmlns="http://www.w3.org/2000/svg"> <rect height="100" width="200" y="50" x="50" stroke-width="5"
stroke="#000000" fill="#7f3f00"/> <rect height="100" width="200" y="150" x="50" transform="skewX(30)"
stroke-width="5" stroke="#000000" fill="khaki"/> <rect height="100" width="200" y="200" x="100" transform="skewY(30)"
stroke-width="5" stroke="#000000" fill="darkkhaki"/> </svg>

Możliwe jest też użycie obu jednocześnie, np.

transform="skewX(30) skewY(20)"

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V