Svg transform rotate: transform — SVG&colon; Scalable Vector Graphics — Вебджем.рф

SVG — матричные преобразования — Все о web разработке на xdan.ru

Когда вы рисуете в SVG, матричная математика используется для того, чтобы понять как сейчас выглядит исходный объект и где на экране он находится. К примеру есть некий элемент 200*200 пиксел, но отобразить его надо на холсте размером 100 на 100. Точка (20,20) должна будет нарисована в (10,10) на холсте. Такую трансформацию нужно сделать для каждой точки элемента. При работе с SVG браузер делает это за вас, используя матричную математику.

Матричная математика делает множество различных типов трансформаций очень простыми. Тем не менее, матричная математика не позволяет сделать с объектом такие операции, как перекос, скрутка или изгиб. SVG позволяет добавить трансформацию к объекту при помощи матриц, до того, как объект будет отображен на экране. Следующее демо позволяет играть параметрами трансформации и увидеть результат визуально.

<g transform="scale(5) translate(15, 15) rotate(20) skewX(20) skewY(5)">
  <rect x="10" y="10" fill="firebrick" />
  <circle r="10" fill="seagreen" stroke="blue"/>
  <rect x="5" y="5" fill="gray" stroke="silver"/>
</g>

svg» type=»image/svg+xml»/>

(Загрузить)

Псевдо функции разделенные пробелами в примере, применяются в порядке написания. Функции накладывают атрибут transform для всех вложенных элементов ‘g’,’svg’,’image’ или любой другой элемент. Шаблоны и градиенты имеют атрибуты, к которым также применяется трансформация.

translate(x, y)
scale(sx, sy)
rotate(angle, cx, cy)
skewX(angle)
skewY(angle)
matrix(a, b, c, d, e, f)

Смещение

translate(x, y)

Перемещает точки объекта на x и y координат. Если ‘y’ не задано, тогда считается что она равна 0. Трансформация сдвига это фундаментальная операция, и накладывается она на все последующие трансформации.

Сжатие

scale(sx, sy)

Трансформация сжатия, вдоль осей x и y. Если sy не задано, то трансформация идет пропорционально и обе оси трансформируются по заданному sx

Вращение

rotate(angle, cx, cy)

Вращение точек вокруг координаты (cx, cy) на угол angle. Точка (cx, cy) это смещение от текущего местоположения. Если cx и cy не заданы, то вращение будет происходит вокруг текущей позиции

Скос

skewX(angle)

skewY(angle)

Скос вдоль оси определяется используемой функцией. Расстояние на которое происходит скос это тангенс угла angle

Matrix

matrix(a, b, c, d, e, f)

Это преобразование напрямую умножает текущую матрицу преобразования на ту, которая подается в эту функцию. Функции до этого позволяют все то же самое, но делают это более понятно

Порядок операций

При матричных преобразованиях, очень важен порядок преобразований.

Смещение, а затем вращение дает иной результат, чем сперва вращение а потом смещение. Преобразования могут быть вложенными.Это показано ниже. окончательный результат в зеленом, не в той же самой позиции, хотя к нему были применены те же самые преобразования.

При матричных преобразованиях нужно несколько раз подумать прежде чем выстроить порядок трансформаций. Только проверив все саим, вы найдете верное решение

<!-- Смещение и вращение-->
 
<use xlink:href="#example" fill="red" />
<g transform="translate(15, 15)" fill="yellow">
    <use xlink:href="#example" />
    <g transform="rotate(30)" fill="green">
        <use xlink:href="#example" />
    </g>
</g>
 
<!-- Вращение и смещение -->
 
<g transform="translate(65)">
<use xlink:href="#example" fill="red" />
<g transform="rotate(30)" fill="yellow">
    <use xlink:href="#example" />
    <g transform="translate(15, 15)" fill="green">
        <use xlink:href="#example" />
    </g>
</g>
</g>

Преобразование

— SVG: Масштабируемая векторная графика

Атрибут transform определяет список определений преобразования, которые применяются к элементу и его дочерним элементам.

Примечание: Начиная с SVG2, transform является атрибутом представления, что означает, что его можно использовать как свойство CSS. Однако имейте в виду, что существуют некоторые различия в синтаксисе между свойством CSS и атрибутом. См. документацию по свойству CSS 9.0004 преобразуйте для конкретного синтаксиса, который будет использоваться в этом случае.

Этот атрибут можно использовать с любым элементом SVG.

 html,
тело,
свг {
  высота: 100%;
}

В SVG 1. 1 разрешалось использовать только эти 16 элементов: , , , ,

`4 , Object`

, , <изображение> , <строка> , <путь> , <полигон> , , , , и ).

Кроме того, унаследованные от SVG 1.1, и поддерживают атрибут gradientTransform , а поддерживает атрибут patternTransform , оба из которых действуют точно так же, как 9004 преобразовать атрибут .

Следующие функции преобразования могут использоваться атрибутом transform

Предупреждение: В соответствии со спецификацией вы также должны иметь возможность использовать функции преобразования CSS. Однако совместимость не гарантируется.