SVG Multtiple Transform - вращать, а затем переводить горизонтально - PullRequest
Новая
       34

SVG Multtiple Transform - вращать, а затем переводить горизонтально

0 голосов
/ 08 марта 2019

Используя SVG, я пытаюсь повернуть его на 30 градусов, а затем перевести это по горизонтали на 100. Проблема в том, что когда я вращаю систему координат, она поворачивается, и поэтому, когда я пытаюсь перевести, я буду перемещать объект вдоль повернутая ось X, которая теперь находится под углом 30 градусов к горизонтали.

Есть ли способ перевести горизонтально после вращения? 

<g transform="rotate(30 50 50) translate(100 0)">
   <rect x="0" y="0" fill="blue" width="100" height="100" />
</g>

Я хочу создать кнопки управления для поворота и перевода вверх, вниз, влево, вправо. Они создадут строку, которая будет использовать привязку данных к свойству transform svg и, следовательно, преобразовывать объект последовательно. Но переводы должны относиться к области просмотра, а не к тому, как объект вращался.

Я использую инфраструктуру vue.js для привязки данных.

Я тоже не хочу использовать css.

Спасибо

1 Ответ

1 голос
/ 10 марта 2019

Если вы хотите, чтобы поворот происходил первым, вы должны поместить это последнее в свой атрибут transform. 

<g transform="translate(100 0) rotate(30 50 50)">
   <rect x="0" y="0" fill="blue" width="100" height="100" />
</g>

Почему? Поскольку приведенный выше фрагмент соответствует 

<g transform="translate(100 0)">
   <g transform="rotate(30 50 50)">
      <rect x="0" y="0" fill="blue" width="100" height="100" />
   </g>
</g>

Вы можете думать о трансформациях как о происходящих изнутри. На прямоугольник влияет преобразование внутреннего вращения перед преобразованием внешнего преобразования.

Или, если подумать об этом, внешнее преобразование создает новую систему координат, которая сдвинута на 100 вправо. В этом есть отдельная система координат, которая поворачивается на 30 градусов. На что нарисован прямоугольник.

...