Свойство SVG-преобразования - PullRequest
Новая
       10

Свойство SVG-преобразования

0 голосов
/ 10 июля 2019

У меня есть некоторые проблемы с преобразованием SVG. То, что я пытаюсь сделать, это повернуть прямоугольную шкалу и двигаться одновременно. До сих пор я не нашел способ сделать это ..

Ситуация следующая:

У меня есть прямоугольник, определенный в HTML, как этот, поэтому он вращается вокруг своего центра: 

<rect class="rotate_rect" id="right_left_polyg" x="50" y="35" width="12" height="12" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2" transform="rotate(45,56,41)"/>

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

Я также попробовал следующее, но это не реагирует, как я надеялся. 

.rotate_rect{
    transform: rotate(45deg);
    transform-origin: center;
}

Есть ли способ определить функцию поворота без указания значения x?

Чтобы сделать его легко воспроизводимым, вот мой прямоугольник .. Я определил класс, как указано выше .. 

<rect class="rotate_rect" id="right_left_polyg" x="50" y="35" width="12" height="12" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2"/>

Есть ли способ сделать это так, чтобы прямоугольник вращался вокруг своей центральной оси, а значение x оставалось вне функции вращения?

1 Ответ

1 голос
/ 10 июля 2019

Постройте прямоугольник так, чтобы его центр находился на 0, 0, и используйте translate(), чтобы переместить его перед поворотом. (Технически движется после вращения из-за семантики преобразования с операциями, примененными от самого внутреннего к самому внешнему.)

Например: 

<rect x="-6" y="-6" width="12" height="12" transform="translate(56,41) rotate(45)" class="rotate_rect" id="right_left_polyg" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2" />

Или: 

<g transform="translate(56,41)">
  <rect x="-6" y="-6" width="12" height="12" transform="rotate(45)" class="rotate_rect" id="right_left_polyg" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2" />
</g>
...