SVG
Transformacja
Szukaj…
Składnia
- transform = „ [funkcje] * ”
- przetłumacz (x [, y])
- obróć (θ [, x, y])
- skala (x [, y])
- skewX (θ)
- skośny (θ)
- macierz (a, b, c, d, e, f)
Stosowanie transformacji
Transformacje można zastosować do elementów, dodając atrybut transform
:
<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>
Lub do grup elementów zawartych w tagach <g>
:
<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>
Więcej transformacji można zastosować do tego samego elementu, dodając je oddzielone spacjami:
<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>
Funkcje transformacji
Tłumaczyć
translate
ruchy grafiki wzdłuż określonych wektorów:
<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>
Pierwsza wartość to translacja x, a druga y. Jeśli y zostanie pominięte, domyślnie będzie to 0.
Skala
scale
zmienia rozmiar elementów według określonych proporcji:
<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>
Podobnie jak translate
, argumentami są x, a następnie y. Jednak w scale
, jeśli y zostanie pominięte, domyślnie przyjmie wartość x; innymi słowy, skaluje element bez zmiany proporcji.
Obracać się
rotate
obraca elementy o określone kąty.
<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>
Pierwszą wartością jest kąt w stopniach. Transformacja jest stosowana zgodnie z ruchem wskazówek zegara. Pozostałe dwie wartości reprezentują punkt, który ma zostać obrócony, domyślnie do początku.