Rotate svg transform: Трансформации для SVG-элементов — CSS-LIVE

Leave a Comment / Разное / By /

вращение — множественное преобразование SVG — повернуть, а затем перевести по горизонтали

Задавать вопрос

спросил

Изменено 3 года, 9 месяцев назад

Просмотрено 2к раз

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

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

Я хочу создать кнопки управления для поворота и перемещения вверх, вниз, влево, вправо.

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

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

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

Спасибо,

  • svg
  • вращение
  • преобразование
  • перевод

2

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

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

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

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

преобразований: перевод, поворот и масштабирование

преобразование: преобразование, поворот и масштабирование

преобразования SVG: перевод, вращать и масштабировать


В Букваре только три из пяти классов трансформаций, которые действительно обсуждаются: переводить, вращать и масштабировать. Там также являются косыми преобразованиями и матричными преобразованиями, хотя мы будем обсуждать только три, которыми пользуется большинство авторов. вероятно, заинтересуется. Как только вы вооружитесь знанием того, как эти используются три, однако читатель сможет понять, непосредственно из спецификации, как использовать другие. Вам может быть интересно знаю, что SVG рабочая группа также рассматривает в рамках своей разработка SVG 2.0, других классов преобразований, в том числе неаффинных преобразования, которые позволили бы искажениям и перспективе также эффекты. В качестве текущего рабочего примера, отображающего подсказку о том, что эти более богатые преобразования могут позволить, вы можете взглянуть на это пример, позволяющий использовать мышь для моделирования неаффинных преобразования с помощью матричных преобразований.

Перевод:
Во-первых, самое простое из преобразований — это перевод. Когда человек становится более знакомы с SVG, его полезность может стать более очевидной, но мы уже можем видеть очевидное применение: у нас есть форма, которая довольно комплекс: 

  d="M 70,140 150,0 200,100 40,100 100,0 170,140 70,140"/> 
 
  d="М 270 140 350,0 400 100 240 100 300,0 370 140 270 140"/>
Чтобы сделать дубликат, нарисованный справа от этой фигуры, мы могли бы либо добавьте число (в данном случае 200) к каждой координате x как показано выше.

Или мы можем использовать translate=translate(200, 0) для выполнения того же самого. 

  d="M 70,140 150,0 200,100 40,100 100,0 170,140 z"/> 
  d="M 70 140 150,0 200 100 40 100 100,0 170 140 z"/>
Обратите внимание, насколько меньше времени потребуется разработчику для просто добавьте атрибут преобразования, вместо того, чтобы вручную изменить все значения координат сложного пути!
Вращение:
Возможно, простейшая демонстрация возможности поворота кривой может быть показана с помощью простого эллипса.

В то время как многие из вас, возможно, помнят, как учились строить координаты эллипса в начальной школе по алгебре:
e(x — c x ) 2 + f(y — c y ) 2 = r 2

это только на третьем семестре курса математического анализа многие (по крайней мере, в США) научились использовать параметрические уравнения и синусоидальные замены, чтобы фактически повернуть эту кривую, скажем, на 30 градусов. Что математика такой фундаментальной операции, как вращение эллипс был бы за пределами умений многих программистов! Тригонометрия участвует в вращении прямоугольника, хотя и доступен большинству программистов, не обязательно веселое упражнение!

В SVG вы просто делаете следующее, чтобы повернуть объект на 30 градусов::

opacity=» .6″ fill=»#faa» stroke=»#806″ stroke-width=»4″/>
opacity=».6″ fill=»#faa» stroke=»#806″ stroke-width=»4″/>
В приведенном выше примере следует подчеркнуть, что вращение всегда происходит относительно некоторого Центральная точка. В этом случае, сказав rotate(30, 200, 200), мы проинструктировал поворот на 30 градусов примерно в точке (200 200), которая также оказывается центром эллипса. Обычно мы будем заинтересован в вращении объекта вокруг его собственного визуального центра, хотя бывают ситуации, когда мы можем захотеть повернуть объект вокруг какой-то другой центроид (в этом примере используется SVG/SMIL, поэтому требуется соответствующий браузер).

Масштаб:

Как показано в учебнике для начинающих, масштабирование может быть не таким интуитивным, как мы могли бы считать. То есть мы часто думаем о масштабировании как простом изменении размер чего-либо. Однако способ обработки масштабных преобразований в SVG умножением каждого из значений координат x и y на некоторое постоянный. Обычно это приводит к кажущемуся перемещению объекта от исходной точки (0,0).

<эллипс
cx="100" cy="50" rx="40" ry="20" fill="grey" stroke="black" stroke-width="12" stroke-dasharray="3,5,2"/>

Давайте закончим этот раздел еще одним примером: попробуем реконструировать иллюстрацию ниже:

Здесь он представлен в натуральную величину.

Мы можно сначала заметить, что иллюстрация выглядит не по центру (вертикально или горизонтально) относительно окна. Если бы, это может означать, что координаты были указаны как относительные координаты, такие как (50%, 35%). Как есть, мы можем, так же, как удобно исходить из того, что координаты находятся в значения пикселей.

[Подсказка: если бы мы беспокоились о точном совпадении изображения, мы могли бы перенесите приведенное выше растровое изображение в SVG с тегом и попытайтесь точно соответствовать размерам, или мы могли бы сделать что-то очень похожее, рисование поверх растрового изображения с помощью инструментов рисования Inkscape.]

на переднем плане изображения шесть одинаковых фигур, все вращается вокруг общей центральной точки, которая находится чуть ниже самой верхней из эллипсы. Цифры, вероятно, представляют собой эллипсы с штрих-массивом. Давайте попробуем сделать один из них в первую очередь. Немного поэкспериментировав, мы может получиться что-то вроде следующего:

 или даже

Думаю, любой из них будет считаться достаточно хорошим для наших целей в этом классе.

С таких объектов шесть, мы можем подсчитать, что каждый будет повернут на 60 градусов (то есть 360/6) больше, чем предыдущий, поэтому что углы поворота будут 0, 60, 120, 180, 240 и 300 градусов. Точка, вокруг которой они все вращаются, будет иметь одинаковую cx в качестве начального эллипса (давайте воспользуемся верхним эллипсом с cx равно 400,

Мы можем играть с различными значениями команды transform = rotate(), такими как 

  transform="rotate(60, 400, 100)" 
  transform="rotate(60, 400, 160)" 
 или 
  transform="rotate(60, 400, 350)"
, пока мы не выберем значение  transform=»rotate(60, 400, 270)», которое «выглядит примерно правильным».

Завершение переднего плана изображения может быть, таким образом, аппроксимировано следующим образом:
stroke-dasharray=»6,3″ fill=»#01d» stroke=»black» stroke-width=»45″ /> 

  stroke-dasharray="6,3" fill="#01d" stroke="black" stroke-width="45" /> 
 <эллипс cx="400" cy="120" rx="50" ry="100" transform="rotate(180, 400, 270)" 
 штрих-dasharray="6,3" fill="#01d" штрих= "черный" stroke-width="45" /> 
  stroke-dasharray="6,3" fill="#01d" stroke="black" stroke-width="45" /> 
  stroke-dasharray="6,3" fill="#01d" stroke="black" stroke-width="45" />
остаток состоит из еще двух кругов с центром в том же центре вращения, как и другие цифры, а именно (400, 200).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *