SVG
преобразование

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Поиск…


замечания

Графические элементы могут быть изменены путем добавления атрибута преобразования . 

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

Вместо того, чтобы левое верхнее начало отображалось в координатах (0, 0), оно будет показано вниз и вправо от точки (10, 10).

Целые группы элементов могут быть преобразованы вместе, а преобразования могут дополнять друг друга. 

<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>

Во-первых, каждая точка круга будет масштабироваться с коэффициентом 3 относительно начала координат, доведя центр круга до середины прямоугольника в точке (15, 15) и его радиусе до 15. Затем прямоугольник и круг будет вращаться вместе на 45 градусов по часовой стрелке вокруг начала координат.

переведите

Переместите прямоугольник на 10 единиц вправо и на 20 единиц вниз: 

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

Переместите его на 0 единиц по горизонтали и на 20 единиц вверх: 

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

Переместите его на 10 единиц влево и 0 единиц по вертикали: 

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

масштаб

Масштабируйте прямоугольник горизонтально по коэффициенту 2 и по вертикали в 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>

Результат эквивалентен 

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

Зеркально прямоугольник горизонтально: 

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

Масштаб действует относительно источника, поэтому это эквивалентно 

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

вращаться

Поверните полигон по часовой стрелке на 90 градусов вокруг начала координат: 

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

Результат эквивалентен 

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

Центр вращения может быть задан явно: 

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

Результат эквивалентен 

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

skewX, skewY

перекосить многоугольник горизонтально на 45 градусов: 

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

Результат эквивалентен 

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

значения x вычисляются как x + y * tan(angle) , значения y остаются неизменными

перекосить многоугольник вертикально на 30 градусов: 

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

Результат эквивалентен (допускает округление) 

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

значения x остаются неизменными, значения y вычисляются как y + x * tan(angle)

матрица

Примените матрицу преобразования к многоугольнику: 

<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>

Каждая точка (x, y) преобразуется путем применения матрицы (a, b, c, d, e, f) следующим образом: 

┌ 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   ┘

Результат эквивалентен 

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

Множественные преобразования

Преобразования могут быть объединены и применены справа налево

Поверните прямоугольник на 90 градусов, а затем переместите его на 20 единиц и направо на 20 единиц: 

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

Результат эквивалентен 

<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
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow