Szukaj…


Uwagi

Elementy graficzne można zmienić, dodając atrybut przekształcenia .

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

Zamiast lewego górnego początku renderowanego we współrzędnych (0, 0), będzie pokazany w dół i w prawo, od punktu (10, 10).

Całe grupy elementów mogą być przekształcane razem, a przekształcenia mogą się do siebie dodawać.

<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45)">
        <rect x="0" y="0" width="30" height="30" />
        <circle cx="5" cy="5" r="5" transform="scale(3)" />
    </g>
</svg>

Po pierwsze, każdy punkt koła zostanie przeskalowany ze współczynnikiem 3 w stosunku do początku, przynosząc środek koła na środek prostokąta w (15, 15) i jego promień do 15. Następnie prostokąt i okrąg zostanie obrócony o 45 stopni zgodnie z ruchem wskazówek zegara wokół początku.

Tłumaczyć

Przesuń prostokąt o 10 jednostek w prawo i 20 jednostek w dół:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>

Przesuń go o 0 jednostek w poziomie i 20 jednostek w górę:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>

Przesuń go o 10 jednostek w lewo i 0 jednostek w pionie:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>

skala

Skaluj prostokąt poziomo o współczynnik 2 i pionowo o współczynnik 0,5:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>

Wynik jest równoważny z

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="5" width="80" height="20" />
</svg>

Odbij lustro prostokąta w poziomie:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>

Skala działa w stosunku do źródła, więc jest to równoważne z

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="-20" y="0" width="20" height="40" />
</svg>

obracać się

Obróć wielokąt w prawo o 90 stopni wokół początku:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>

Wynik jest równoważny z

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 0,30 -20,15" />
</svg>

Środek obrotu można podać wyraźnie:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>

Wynik jest równoważny z

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="30,0 30,30 10,15" />
</svg>

skewX, skośny

pochylić wielokąt poziomo o 45 stopni:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>

Wynik jest równoważny z

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 60,30 30,30" />
</svg>

wartości x są obliczane jako x + y * tan(angle) , wartości y pozostają niezmienione

pochylić wielokąt pionowo o 30 stopni:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>

Wynik jest równoważny (pozwalając na zaokrąglenie)

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>

wartości x pozostają niezmienione, wartości y oblicza się jako y + x * tan(angle)

matryca

Zastosuj macierz transformacji do wielokąta:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>

Każdy punkt (x, y) zostanie przekształcony przez zastosowanie macierzy (a, b, c, d, e, f) w następujący sposób:

┌ x_new ┐    ┌ a  c  e ┐ * ┌ x_old ┐   ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ =  └ b  d  f ┘   │ y_old │ = └ x_old * b + y_old * d + f ┘
                           └   1   ┘

Wynik jest równoważny z

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="40,10 70,28 34,58 4,40" />
</svg>

Wiele transformacji

Transformacje mogą być łączone i są stosowane od prawej do lewej

Obróć prostokąt o 90 stopni, a następnie przesuń go w dół o 20 jednostek, a w prawo o 20 jednostek:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="-10" y="-20" width="20" height="40"
        transform="translate(20 20) rotate(90)" />
</svg>

Wynik jest równoważny z

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="10" width="40" height="20" />
</svg>


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