В большинстве случаев неудобно поворачивать всю систему координат относительно точки (0, 0). Например, хочется повернуть отдельный объект вокруг произвольной точки. Этого можно добиться серией трансформаций: translate(centerX, centerY) rotate(angle) translate(-centerX, -centerY). О также подобную задачу можно решить более простым способом, благо разработчики SVG об этом позаботились: просто в rotate следует добавить координаты точки, вокруг которой хочется повернуть объект: rotate(angle, centerX, centerY).
<rect x="70" y="30" width="20" height="20" transform="rotate(45)" style="fill: black;"/>
<rect x="70" y="30" width="20" height="20" style="fill: gray;"/>
<!-- квадрат в положениях до и после поворота -->
<polyline points="100 0, 0 0, 0 100" style="stroke: black; fill: none;"/>
Центром вращения (или по другому «осью вращения») по умолчанию является точка (0, 0). На следующем примере нарисуем серый квадрат. Его повернем на 45° и перекрасим в черный. Для наглядности добавим так же оси координат.
В SVG можно повернуть систему координат на определенный угол. По умолчанию, угол увеличивается по мере поворота по часовой стрелке. Горизонтальной линия имеет угол 0°.
Подготовили: Евгений Рыжков и Тимур Лисица
Комментариев нет:
Отправить комментарий