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.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow